哪个 CSS 选择器更快：ul > li:nth-of-type(3) > a .. 或 ul > li > a:nth-of-type(3)答案

【问题标题】：Which CSS selector is faster: ul > li:nth-of-type(3) > a .. or ul > li > a:nth-of-type(3)哪个 CSS 选择器更快：ul > li:nth-of-type(3) > a .. 或 ul > li > a:nth-of-type(3)
【发布时间】：2014-10-25 06:43:45
【问题描述】：

假设我有一个类似的列表

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

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

【问题讨论】：

我建议使用一个大数据集，比如一千个左右的元素，并通过document.querySelectorAll() 和JS Perf 运行两个选择器。然后你就会知道（为什么这可能无关紧要）。
ul > li:nth-of-type(3) > a and ul > li > a:nth-of-type(3) target the same element 不，他们没有

标签： jquery html css optimization

【解决方案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>

【讨论】：