這個選擇器是錯誤的還是低效的？

這僅僅是一個簡單的問題，但讓我們說我有這樣的HTML：這個選擇器是錯誤的還是低效的？

<div class="header"> 
    <ul> 
     <li>Hi</li> 
    </ul> 
</div>

它是錯誤的或低效的樣式我的CSS這樣嗎？

.header ul li { font-size: 12px; }

我相信，我以前讀的是不建議，但它似乎是我的風格的HTML和CSS最徹底的方法。

來源

2014-09-01 James Willson

如果你想在文檔中選擇特定的元素而沒有其他的元素，那麼這是正確的方法。否則，如果你想要「我的文檔中的所有LI元素」，那麼就使用li元素選擇器。 – Kyle 2014-09-01 08:51:51

你從哪裏得到錯誤或低效的印象？對我來說沒問題。 – lxcky 2014-09-01 08:52:06

不只是錯，但在大多數情況下更好，加上我認爲你需要了解更多關於css特異性的知識...... – 2014-09-01 08:52:52

你沒有引用你讀到的所以我猜測你讀了一些關於「使用高效的CSS選擇器」。這是是Page Speed Insights recommendations之一;似乎這個建議已被刪除。

據我所知，這條規則鼓勵儘可能短地選擇*。對於給定的標記，它是更有效地說頭內的所有列表項：

.header li { }

，而不是說頭內的無序列表中的所有列表項：

.header ul li { }

實際上，如果可能，您可以使用較短的規則：

.header { /* children inherit the inheritable properties */ } li { /* affects all list items, use if all must be styled similarly */ }

*據我記憶，PageSpeed文檔說，瀏覽器從下到上匹配CSS規則。例如：

li { color: red; }

它可以在遇到列表項時簡單地應用紅色。雖然，對於規則，如：

.header ul li { }

瀏覽器一直走了當它遇到一個列表項，檢查是否父母一方是無序列表，一個他們的父母有.header文檔樹類。瀏覽器必須檢查列表項的所有父項，直到找到匹配項或它到達文檔元素。這是低效的。

此規則已從PageSpeed建議中刪除，因此瀏覽器可能找到了處理低效選擇器的有效方法。

來源

2014-09-01 08:59:38

爲OP的利益，你也可以解釋爲什麼這樣更好？ – fcalderan 2014-09-01 09:01:01

這個選擇器是錯誤的還是低效的？

回答

相關問題