美文网首页
天呐,今天才知道浏览器对 CSS选择符的解析是从右往左进行的

天呐,今天才知道浏览器对 CSS选择符的解析是从右往左进行的

作者: 一个爱折腾的程序媛妹子 | 来源:发表于2019-05-23 11:59 被阅读0次

      在大多数人的观念中(包括我自己),都觉得浏览器对 CSS选择符的解析式从左往右进行的,因为中国人有一个习惯,不论干什么,潜意识中的顺序都是从左到右,从上到下,从大到下,但实际上是从右向左进行的。

       先说下为啥是从右向左而非从左往右,

html代码片段

        CSS选择器是 div div p.p1 span.red{color:red},如果从左到右一层一层的筛选:首先会看到很多div被筛选出来,接下来筛选每一个div,首先在#div2中看到了class=p1的p,此时我们很是高兴,感觉胜利就在前方了,再看class=p1的p标签的子元素,看到第一个很是失望,不符合span.red,不要急,再看下一个又不符合规则,小小的安慰自己一下,最后一个含有class,说不定就是了,结果,结果居然class=green,此时火冒三丈,就差最后一层,怎奈居然出现这种事,无奈之下只能在返回#div2继续匹配它的子元素....

       但如果我们换一个思路,首先匹配class=red 的 span,我们找到2个符合条件的的span然后在和上一层比对,我们需要的是span.red 是 p.p1的下属元素,此时就发现刚才筛选出来的第二个 span 元素不符合要求,再来匹配第一个,层层向上匹配,恭喜你,最终匹配成功

       总结:也就是说,对于浏览器而言,对于程序而言,css选择符从右到左的解析更为高效

根据浏览器解析css选择符这一特性,编写CSS需要注意以下几点:

(1)避免使用通配规则

除了传统意义上的通配选择符之外,我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下,推荐仅使用 ID、类和标签选择符。

(2)不要限定 ID 选择符

在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符。例如,div#header是没有必要的,应该简化为#header。

(3)不要限定类选择符

不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。例如span.red改为.red更好。当然如果html是<p class="red"></p><span class="red"></span>这样,则span.red更为高效

(4)让规则越具体越好

不要试图编写像 ol li a 这样的长选择符,最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上。

(5)避免使用后代选择符

通常处理后代选择符的开销时最高的,而使用子选择符也可以得到想要的结果,并且更加高效。

(6)避免使用标签—子选择符

如果有像#menus > li > a这样的基于标签的子选择符,那么应该使用一个类来关联每个标签元素,例如.menus-item。

(7)检查子选择符的所有用途

检查所有使用子选择符的地方,然后尽可能用具体的类取代它们。

(8)依靠继承

了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则。例如,对列表元素而不是每个列表元素指定list-style-image。请参考继承属性的列表来了解每个元素的可继承的属性。

       最后,记住一句话:css选择符是从右向左解析的,css选择符是从右向左解析的,css选择符是从右向左解析的

相关文章

  • 天呐,今天才知道浏览器对 CSS选择符的解析是从右往左进行的

    在大多数人的观念中(包括我自己),都觉得浏览器对 CSS选择符的解析式从左往右进行的,因为中国人有一个习惯,...

  • 有关CSS

    如何写出更好的CSS?(CSS是从右往左进行解析) ①避免使用*(全局)选择器。(耗费性能) ②CSS选择器的层级...

  • 初探VirtualDOM与Diff

    CSS的解析是从右往左逆向解析的(从DOM树的【下-上】解析比【上-下】解析效率高),嵌套标签越多,解析越慢。 D...

  • 浏览器如何解析 CSS 选择器?

    浏览器从右往左(也称为自底向上)解析 CSS 选择器,这样的匹配节点的方式可以快速、准确的与 render 树上的...

  • 【CSS】选择器解析规则

    当我们接触css选择起的时候,会认为浏览器解析css选择器是从左向右解析;其实不然浏览器解析css选择器是从右向左...

  • 2.CSS

    //CSS基础 Cascsding Style Sheet(层叠样式表)CSS选择器1.浏览器的解析方式是从右向...

  • CSS 全解析实战(三)-CSS 基础

    1 选择器(1) 基本规则;是分隔符,而不是语句结束符 选择器浏览器是从右往左解析的,继续向左解析只是验证,如此一...

  • CSS从右往左解析到底好在哪里

    假如有如下的一段HTML: 和如下的CSS: 假如我们的CSS解析器是从左往右进行匹配的,那么会生成如下的styl...

  • 2021.12.10的天空。

    从左往右 是云吞掉天 从右往左 是天破开云

  • CSS选择符介绍

    我们都是通过CSS选择符来锁定HTML元素进行样式的修改,在CSS选择符这一节中讲到了以下几种选择符: 子选择符与...

网友评论

      本文标题:天呐,今天才知道浏览器对 CSS选择符的解析是从右往左进行的

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