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はしばしば悪い考えであることを知っています) が、どのセレクターがより高速であるかを知りたいです。そのような比較を行う自動化された方法はありますか?