美文网首页
CSS选择器执行顺序

CSS选择器执行顺序

作者: 夜月徐风 | 来源:发表于2019-11-30 11:44 被阅读0次

所有写CSS样式的人应该都会明白一条: 少用层级关系
具体为什么可能有一部分人就不明白了。
比如,
.example p span {
color: red;
}
第一感觉这么写其实层级挺清晰的,类名example下的p标签下的span,这个范围圈定的已经很明确了。

其实不然,浏览器是不这么认为的。这样反而会让浏览器花费更多的时间去解析满足条件的span的样式。,因为CSS选择器是从右往左进行解析的

带着这个顺你在去感觉一下上面的路径span的样式:
先去找到所有的span,接着沿着一个span标签向上去找到父元素是p标签的span,然后在向上查找这个p标签的父元素类型是.example的元素,如果满足条件就加入结果集;如果知道根元素html都不满足,就排除这一个span。然后就会从下一个span开始继续这个过程,试想一下如果你一个DOM结构中有很多很多的span,如果还有很多p标签呢?

这里我们在来评价一下你的第一感觉就是从左向右。
你在按照从左向右的思维进行书写的时候,因为样式结构是你自己创建的,你按照这个思维就会感觉这个路径顺序很清晰。但是,你别忘了,你的思维不代表浏览器的思维。而浏览器在执行的时候是需要很多分析、遍历和回溯的过程的。 浏览器读到这条规则的时候会去查找所有的example类名的标签,然后又在这个标签下面进行遍历再找到所有的p标签(这里就出现了大量的遍历工作),接着在找到的每一个p标签向下再去遍历子元素是不是span标签,是就加入结果集,不是再回溯到下一个p标签进行遍历子元素是不是有span标签。

按照上面的分析,很明显自右向左比自左向右执行的效率要搞得多的多。
因为自右向左一开始就限定了一个很精确的目标范围,这就筛选掉了大量的不满足条件的最右的子节点,减少了很多的回溯的过程。
不过有一个情况是,如果一开始就有很多不符条件的span,自右向左确实是浪费了很多向上查找的过程。不过通常的角度来考虑,自右向左是更精确的,因为出发点就是你的目标标签,因为浏览器是不知道你的DOM结构是什么样的。

所以少用层级关系。

相关文章

  • css代码规范

    CSS选择器 CSS执行顺序 CSS书写顺序 CSS规范 CSS命名规则 语义化当清除所有自定义的样式与布局,只使...

  • CSS渲染原理以及优化策略

    本文目录: 1.浏览器构成 2.渲染引擎 3.CSS 特性 4.CSS 选择器执行顺序 5.CSS 书写顺序对性能...

  • CSS选择器执行顺序

    所有写CSS样式的人应该都会明白一条: 少用层级关系。具体为什么可能有一部分人就不明白了。比如,.example...

  • 浅谈CSS选择器,及CSS选择器优先级

    在看CSS选择器优先级顺序前,我们先来简单说说CSS基本选择器有哪些? 通用选择器(如:*,即选择所有元素) 标签...

  • css中的权重规则

    问题 css的加载顺序 行内 > 内部 > 外部 / id选择器 > class选择器??? 最开始是这样的,...

  • CSS模块化重构

    -- CSS模块化 Sss Component Rules -- 早期CSS存在的问题 选择器繁琐冗长 空间顺序混...

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • 前端面试题集锦(css篇)

    请描述一下 CSS 选择器的优先级别顺序? !import > 内嵌 > id > class > tag > *...

网友评论

      本文标题:CSS选择器执行顺序

      本文链接:https://www.haomeiwen.com/subject/qrhowctx.html