（爲什麼）被認爲是有害的CSS星形選擇器？

CSS中的星形選擇器是否會影響頁面渲染性能？（爲什麼）被認爲是有害的CSS星形選擇器？

有沒有使用它的注意事項？

* { 
    margin:0; 
    padding:0; 
}

來源

2009-11-11 gpilotino

在你聽到什麼情況下，這是「有害」？以某些方式使用時，根據瀏覽器的不同可能會有不同的表現（例如，考慮'* html {}'）。 – Blixt 2009-11-11 09:42:14

我問這也是因爲我看到「標準事實上」的CSS重置方法避免使用它。 – gpilotino 2009-11-11 10:42:43

當涉及到性能，史蒂夫Souders的是的人：

的：

Performance Impact of CSS Selectors

Simplifying CSS Selectors

從報告一個無恥報價優化CSS選擇器的關鍵是專注於最右邊的選擇器, 也被稱爲密鑰選擇器（重合？）。這裏有更多昂貴的選擇器：A.class0007 * {}。雖然此選擇器可能看起來更簡單，但瀏覽器的價格更高。因爲瀏覽器從右向左移動，它開始於檢查所有匹配鍵選擇器「*」的元素。這意味着瀏覽器必須嘗試將此選擇器與頁面中的所有元素進行匹配。

[大膽重點煤礦]

來源

2009-11-11 10:12:17 anddoutoi

我也引用「很明顯，CSS選擇器與一個與許多元素相匹配的按鍵選擇器會顯着減慢網頁速度。」有趣的閱讀，謝謝。 – gpilotino 2009-11-11 10:46:14

我更喜歡這句話「基於這些測試，我有以下假設：對於大多數網站來說，優化CSS選擇器可能帶來的性能收益會很小，並且不值得花費。」 – arkanciscan 2015-10-18 04:22:25

@arkanciscan這是idd非常真實。優化CSS選擇器可能是過早優化的最佳案例之一。 – anddoutoi 2015-10-19 07:38:03

由於我使用的是在每一個我的項目完全相同的規則，並沒有產生嚴重的性能比較的問題，我會說：不，不是因爲據我所知。

來源

2009-11-11 09:37:14

一種觀點認爲，它不是那麼多*是一個性能問題，這是很好的舊喜歡 - 它有一個IE問題。它影響IE 5,5.5和6以及Macintosh變體。基本上，有一些所謂的HTML明星選擇錯誤，這適用如下：

* html

這應該被理解爲沒有元素匹配，因爲HTML是根，不能是一個子元素。 IE將此解釋爲html。

* * body

再一次，應該匹配到沒有元素，因爲身體不能是孫子元素 - 即使它是HTML的子元素。 IE將此解釋爲* body。

* html body

這應該不匹配任何元素，但IE將此解釋爲html正文。

性能方面通常認爲應用*僅意味着該樣式適用於頁面中的每個元素。我很少發現這本身就是一個問題 - 它將成爲一個問題的意義在於，無論如何你可能在這方面有太多的標記。同樣，它適用於所有內容，這意味着您需要增加代碼來處理不應該擁有該風格的元素。和其他一切一樣，決定什麼是權衡和平衡應該由您決定。

來源

2009-11-11 09:50:34

我不會說這是一個錯誤，但在這種情況下的開發人員錯誤 – Jonathan 2015-11-04 12:51:47

對於一些使用*的屬性可能會產生意想不到的結果。

* { color: blue } 
li { color: red }

現在給出<li><i>text</i></li>，文本將是藍色！

來源

2009-11-11 10:03:47

是的，但是當你設置'*'的屬性時，你可能不會想到它*。用'*'和你很少使用的界面元素或元素，這是更真實的。 – Boldewyn 2009-11-11 10:15:54

@ ApoY2K：僅僅因爲它的運作方式應該是這樣，並不意味着它是預期的。當你有一個*選擇器時很容易忘記它。當你記得時，你必須仔細考慮**每次你添加一個新的元素**來檢查你是不是應用你不想要的樣式。 – DisgruntledGoat 2009-11-11 10:40:45

@ApoY2k：當然，如果你是完美的，永遠不會犯錯誤，你永遠不會寫出不符合預期的代碼。否則，認爲該顏色是從父代繼承是合理的，這就是紅色以外的文本是意外的。 – 2009-11-11 10:50:49

（爲什麼）被認爲是有害的CSS星形選擇器？

回答

相關問題