3 回答

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊
這應(yīng)該像我認(rèn)為的那樣工作嗎?
不,您看到的行為是正確的。
在您的最后一個(gè)示例中,盡管<blockquote>包含一個(gè)<p>,但它<blockquote>本身是match *:not(p),并且條件是它必須是的后代<div>。樣式僅應(yīng)用于<blockquote>,但隨后由其內(nèi)部繼承<p>。
該<p>元素本身仍然被反對(duì)否定,所以<p>本身仍然被排除在你的選擇。它只是從其父<blockquote>元素繼承文本顏色。
即使它的相對(duì)祖先都不匹配選擇器,您也有喜歡html和body擔(dān)心的元素-盡管您可能一body開(kāi)始就可以選擇一個(gè)選擇器:
body div...
這就是為什么我經(jīng)常強(qiáng)烈建議您不要使用:not()選擇器來(lái)過(guò)濾后代,尤其是在不使用類(lèi)型選擇器進(jìn)行限定的情況下(例如div您的示例)。它不能像大多數(shù)人所期望的那樣起作用,并且繼承屬性的使用color只會(huì)使問(wèn)題更加復(fù)雜,而且會(huì)使作者更加困惑。有關(guān)更多示例,請(qǐng)參閱我對(duì)其他問(wèn)題的回答:
為什么CSS:not()聲明沒(méi)有過(guò)濾掉?
父/祖先元素的CSS否定偽類(lèi):not()
所描述問(wèn)題的解決方案是簡(jiǎn)單地將不同的顏色應(yīng)用于<p>元素。由于繼承,您將無(wú)法使用選擇器簡(jiǎn)單地排除它們:
/* Apply to div and let all its descendants inherit */
div {
color: red;
}
/* Remove it from div p */
div p {
color: black;
}
關(guān)于選擇器級(jí)別4:是的,:not()確實(shí)已得到增強(qiáng),可以接受包含組合器的完整復(fù)雜選擇器。本質(zhì)上,這意味著(一旦瀏覽器開(kāi)始實(shí)現(xiàn)它)您將能夠編寫(xiě)以下選擇器,并使它完全執(zhí)行您想要的操作:
p:not(div p) {
color: red;
}
如果有人感興趣,今天它可以在jQuery中使用。

TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
顏色分配給blockquote,然后由繼承p。
:not(p)只是使其不直接應(yīng)用樣式。它們?nèi)匀皇抢^承的。

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
:not()選擇器忽略組合器-它僅對(duì)匹配的元素進(jìn)行操作,而不檢查它是否是另一個(gè)元素的直接或遠(yuǎn)距離后代。在以相同的方式div p.test將相匹配的元件的超集div > p.test將匹配(即p.test元素),div *:not(p)將也匹配匹配元素的一個(gè)超集div > *:not(p)(即是,即元素本身不p)。
- 3 回答
- 0 關(guān)注
- 593 瀏覽
添加回答
舉報(bào)