與直接後代的css性能

我搜索了但我沒有得到具體的答案。與直接後代的css性能

我會問一個簡單的問題

是不是更有效地做到這一點：

body > html > section > div.class1, 
body > html > section > table > tbody > tr > td > div.class1 
{ 
    background-color : red; 
}

或本：

div.class1 { 
    background-color: red; 
}

2017-09-25 Rodrigue

少特異性更快。每個選擇器都是循環的另一個運行。規則的拇指，深入3個選擇器perf將開始受到影響。

另外請注意，以及PERF是有問題，當您指定太深真正的性能損失會。我向你保證，長期維護成爲真正的問題。再深入3個選擇器也是一個很好的經驗法則。

最後，如果你需要用CSS結構幫助/架構的嘗試：

2017-09-25 22:25:12

瀏覽器會檢查並轉換每次你給他們的代碼（HTML和CSS包括），對於每個選擇器，瀏覽器將屬性設置爲正確的HTML標記。對於非常小的網站，它不會影響很多，但對於像亞馬遜這樣擁有超過100萬行代碼的大型網站，它會影響很多的性能。

2017-09-25 22:30:35

回答