這是CSS3 :not()偽類的官方文檔：http : //www.w3.org/TR/css3-selectors/#negation和建議的CSS選擇器4級增強功能：http ://dev.w3.org/csswg / selectors4 /＃negation我一直在搜索的實現和瀏覽器支持:not()，但發現的唯一示例是單個元素或元素的直接子元素，例如：div *:not(p) { color: red; }上面的示例僅當<p>是的直接子代時有效<div>，而當<p>是的更遠的子代時無效<div>。div :not(p) { color: red;}<div> <ul> <li>This is red</li> </ul> <p>This is NOT</p> <blockquote><p>This is red but is not supposed to be!</p></blockquote></div>如果答案在上面的官方文檔中，那么我沒有發現/理解。正如我所說，我已經搜索了該站點和網絡，但是找不到關于：not（）作為另一個元素的后代的支持或缺乏的討論。這應該像我認為的那樣工作嗎？
3 回答
楊__羊羊
TA貢獻1943條經驗 獲得超7個贊
這應該像我認為的那樣工作嗎？
不，您看到的行為是正確的。
在您的最后一個示例中，盡管<blockquote>包含一個<p>，但它<blockquote>本身是match *:not(p)，并且條件是它必須是的后代<div>。樣式僅應用于<blockquote>，但隨后由其內部繼承<p>。
該<p>元素本身仍然被反對否定，所以<p>本身仍然被排除在你的選擇。它只是從其父<blockquote>元素繼承文本顏色。
即使它的相對祖先都不匹配選擇器，您也有喜歡html和body擔心的元素-盡管您可能一body開始就可以選擇一個選擇器：
body div...
這就是為什么我經常強烈建議您不要使用:not()選擇器來過濾后代，尤其是在不使用類型選擇器進行限定的情況下（例如div您的示例）。它不能像大多數人所期望的那樣起作用，并且繼承屬性的使用color只會使問題更加復雜，而且會使作者更加困惑。有關更多示例，請參閱我對其他問題的回答：
為什么CSS：not（）聲明沒有過濾掉？
父/祖先元素的CSS否定偽類：not（）
所描述問題的解決方案是簡單地將不同的顏色應用于<p>元素。由于繼承，您將無法使用選擇器簡單地排除它們：
/* Apply to div and let all its descendants inherit */
div {
color: red;
}
/* Remove it from div p */
div p {
color: black;
}
關于選擇器級別4：是的，:not()確實已得到增強，可以接受包含組合器的完整復雜選擇器。本質上，這意味著（一旦瀏覽器開始實現它）您將能夠編寫以下選擇器，并使它完全執行您想要的操作：
p:not(div p) {
color: red;
}
如果有人感興趣，今天它可以在jQuery中使用。
吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
:not()選擇器忽略組合器-它僅對匹配的元素進行操作，而不檢查它是否是另一個元素的直接或遠距離后代。在以相同的方式div p.test將相匹配的元件的超集div > p.test將匹配（即p.test元素），div *:not(p)將也匹配匹配元素的一個超集div > *:not(p)（即是，即元素本身不p）。
- 3 回答
- 0 關注
- 594 瀏覽
添加回答
舉報
0/150
提交
取消