爲什麼我需要*，*：在{...}之後而不是僅僅是{...}？

有人可以解釋爲什麼通用選擇器不適用於：after？該標準的相關部分將會很好，但也是其背後的基本原理。爲什麼我需要*，*：在{...}之後而不是僅僅是{...}？

編輯：我可以看到我的問題措辭不佳;我很抱歉。我的意思是* { color: green; }幾乎使文檔中的所有文本呈綠色，但不適用於#mypar:after { content:"newly-added content"; }。我意識到這個內容不存在於原始DOM中......但它看起來像* { color: green; }應該就足夠了，而不需要寫*, *:after { color: green; }。

爲了清晰起見，我也編輯了我的問題的標題。

2nd編輯：這是壞的......好吧，我試圖提供一個簡單的例子，它並沒有幫助。在閱讀this article後，我的問題出現了。請注意，筆者使用

*, *:before, *:after { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
}

，而不是

* { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
}

來源

2014-02-17 ezequiel-garzon

爲什麼你說它不？請進一步解釋。 –

你的意思是'*：在{...}'之後？爲我完美工作。非常適合'box-sizing' :) – 2014-02-17 22:36:19

它確實有效...請參閱示例：http://jsfiddle.net/audetwebdesign/e37cH/ –

通用選擇*匹配任何元素，但僞元素不被視爲元素。它們只能與使用僞元素選擇器的選擇器（如:after）匹配。

在問題中給出的情況下，當使用* { color: green; }並且沒有規則覆蓋它時，僞元素內容仍然是綠色的。即使僞元素不匹配*，與其關聯的真實元素也會匹配，並且color將從其中繼承。但是，如果您嘗試* { border: solid 1px }，則會看到所有元素都有邊框，但僞元素不（無法繼承該border屬性）。

我不認爲有這樣的官方原理，但似乎並沒有使用僞元素應該匹配通用選擇器的用例。

來源

2014-02-17 23:21:42

感謝您的詳細回覆。我給出的例子試圖簡化問題，但這並不好。我遇到這個問題，閱讀[this]（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）文章。我認爲不需要'*：'之後'或'：之後'會感覺更直觀。 –

從MDN，

星號（*）是CSS通用選擇。它匹配任何類型的單個元素。

但是:after不是元素，是一種僞元素。然後，它不匹配*。

來源

2014-02-17 23:23:11 Oriol

爲什麼我需要，：在{...}之後而不是僅僅是{...}？

回答

爲什麼我需要*，*：在{...}之後而不是僅僅是{...}？

回答

相關問題

爲什麼我需要，：在{...}之後而不是僅僅是{...}？