比较 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(even):not(.list-item_active)
7. .list-item[data-state="active"] (data-state="active" 应该添加到html中)

也许我会用

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

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

Answer 1

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

变化：

.list-item_active { ... }

收件人：

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

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