哪个CSS选择器更快：ul＆gt; li：nth-​​of-type（3）＆gt; a ..或ul＆gt; li>一：第n的式（3）

Question

假设我有一个像

这样的列表

<ul>
  <li>
    <a>List item 1</a>
  </li>
  <li>
    <a>List item 2</a>
  </li>
  <li>
    <a>List item 3</a>
  </li>
  <li>
    <a>List item 4</a>
  </li>
</ul>

然后选择器ul > li:nth-of-type(3) > a和ul > li > a:nth-of-type(3)定位相同的元素。但哪一个平均更快？为什么？

一般情况下，如果您有类似

的内容

<ul>
  <li>
    <a>List item 1</a>
  </li>
  <li>
    <a>List item 2</a>
  </li>
  .
  .
  .
  <li>
    <a>List item k</a>
  </li>
</ul>

需要为ul > li:nth-of-type(i) > a范围内的某些i选择[1, k]，使用ul > li > a:nth-of-type(i)会更快吗???

Answer 1

正如评论中已经提到的那样，那些选择器不会选择相同的。

一个小小的jquery小提琴将显示差异http://jsfiddle.net/7pz402te/

所以事实上，a：nth-​​of-type（）会更快，因为你的李只有一个链接。

＆＃13;

＆＃13;

ul > li:nth-of-type(3) > a {
  font-size: 40px;
}
ul > li > a:nth-of-type(3) {
  color: magenta;
}

＆＃13;

<ul>
  <li>
    <a>List item 1.1</a>
    <a>List item 1.2</a>
    <a>List item 1.3</a>
  </li>
  <li>
    <a>List item 2.1</a>
    <a>List item 2.2</a>
    <a>List item 2.3</a>
  </li>
  <li>
    <a>List item 3.1</a>
    <a>List item 3.2</a>
    <a>List item 3.3</a>
  </li>
  <li>
    <a>List item 4.1</a>
    <a>List item 4.2</a>
    <a>List item 4.3</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;