Question

有人告诉我，但我想确认一下。

从HTML中选择CSS最快的方法是什么？

<style>
#example{}

section div:nth-of-type(1){}
</style>

<body>
<section id="section">
    <div id="example">          

    </div> 

    <div id="example2">

    </div>
</section>
</body>

Answer 1

在考虑选择器性能时，要记住两个重要但违反直觉的原则：

规则匹配引擎的设计假设是要匹配的元素要比要匹配的规则多得多，并且只有很少的规则适用于任何给定的元素。
< / li>
规则匹配引擎不会针对每个规则从根目录遍历完全构造的DOM树。相反，它会解析每个元素的规则列表，并将其添加到DOM中。

因此，选择器性能大致可分为三类。如果可以仅通过查看元素本身及其属性（而不是元素的内容或它与树中其他元素的关系）来决定规则是否与任何给定元素匹配，那么匹配将非常快。 #id，.class，tagname，[attr]等选择器都在此类别中。第二个最有效的类别是何时只能基于元素及其父元素（例如#foo bar或.foo > .bar）进行决策。在最坏的情况下，它们花费的时间与DOM树中元素的深度成比例，而该深度通常不是那么大。其他所有事情都变慢了，这既是因为它涉及更复杂的DOM遍历，又是因为在实现过程中并未对其进行优化。

#example可以通过仅查看元素本身来匹配，这非常快。但是div:nth-of-type(1)需要遍历元素的先前兄弟姐妹列表，这样效率低下。

因此，如果显示的HTML和CSS片段告诉您#example比div:nth-of-type(1)快，那是正确的。在这么小的文档中，这没什么大不了的，但是在包含许多<div>元素的大文档中，这可能会成为问题。

Answer 2

如果您希望特定于的div具有样式，请使用ID选择器（例如#example）
如果要使 div 中的第一个#container具有样式，请使用#container div:first-of-type。
如果要作为其父级的第一个孩子的每个div 拥有样式，请使用div:first-of-type。

Css选择时，#section vs section：nth-of-type（1）

2 个答案:

Css选择时，#section vs section：nth-​​of-type（1）

2 个答案:

Css选择时，#section vs section：nth-of-type（1）