jquery - 哪个 CSS 选择器更快 : ul > li:nth-of-type(3) > a . 。或 ul > li > a:nth-of-type(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 fiddle 将显示差异 http://jsfiddle.net/7pz402te/

事实上，a:nth-of-type() 会快得多，因为您的 li 中只有一个链接。

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

<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>