performance - 比较 CSS 选择器的性能

Question

我有这样的代码：

html:

<ul class="list">
    <li class="list-item"> item 1 </li>
    <li class="list-item list-item_active"> Active item </li>    
    <li class="list-item"> item 3 </li>
    <li class="list-item"> item 4 </li>
    <li class="list-item"> item 5 </li>    
</ul>

CSS：

.list-item:nth-child(even) {
    background: #eee
}
.list-item_active {
    background: none;
}

jsfiddle 链接 - http://jsfiddle.net/Re3xV/2/

让我们假设它.list-item没有可以设置样式的子元素。

问题：我需要.list-item_active覆盖.list-item:nth-child(even)

我需要确定，就选择器性能而言，以下哪种解决方案是最快的：

1. ul .list-item_active
2. li.list-item_active
3. .list .list-item_active
4. .list-item.list-item_active
5. .list-item_active:nth-child(n)
6. .list-item:nth-child(偶数):not(.list-item_active)
7. .list-item[data-state="active"] (data-state="active" 应该添加到 html 中)

可能我会用

.list-item_active {
    background: none !important;
}

因为它似乎根本不影响性能（而且我知道使用!important通常是一个坏主意），但我仍然想知道，哪个选择器更快。有没有自动化的方法来进行这种比较？

Answer 1

这一切都与特异性有关，而不是速度。.list-item:nth-child(even)比.list-item_active在这种情况下具有更高的特异性。

改变：

.list-item_active { ... }

至：

.list-item.list-item_active { ... }

http://jsfiddle.net/JamesD/Re3xV/3/