html - css除了之外 - css not nth-child



CSS否定偽類:父(祖先)元素的not() (2)

這不是讀“,選擇所有具有祖先不是div元素的h1元素......?”

確實如此。 但是在典型的HTML文檔中, 每個 h1至少有兩個不是div元素的祖先 - 而那些祖先都是bodyhtml

這是嘗試使用:not()過濾祖先的問題:not() :它只是不能可靠地工作,尤其是當:not()沒有被某些其他選擇器(例如類型選擇器或類選擇器:not()限定時,例如.foo:not(div) 。 只需將樣式應用於所有h1元素並使用div h1覆蓋它們,您將更容易。

選擇器4中:not()已被增強,可接受包含組合子的完整復雜選擇器,包括後代組合子。 這是否將在快速配置文件(以及CSS)中實現仍有待測試和確認,但一旦實現,您能夠使用它來排除具有某些祖先的元素。 由於選擇器如何工作,必須對元素本身而不是祖先進行否定才能可靠地工作,因此語法看起來會有所不同:

h1:not(div h1) { color: #900; }

任何熟悉jQuery的人都會很快指出這個選擇器今天在jQuery中運行 。 這是Selector 3之間的差異之一:not()和jQuery的:not() ,Selectors 4試圖糾正這些差異

這讓我瘋狂:

HTML:

<div><h1>Hello World!</h1></div>

CSS:

*:not(div) h1 { color: #900; }

這不是讀“,選擇所有具有祖先不是div元素的h1元素......?” 因此,“你好世界!” 不應該是紅色的,但它仍然是。

對於上面的標記,添加子組合器可以工作:

*:not(div) > h1 { color: #900; }

但是如果它不是div元素的子元素,則不會影響h1元素。 例如:

<div><article><h1>Hello World!</h1></article></div>

這就是為什麼我想將h1元素指定為div元素的後代而不是子元素。 任何人?


<html>元素不是<div><body>元素不是<div>

所以條件“有一個不是<div>的祖先”對於所有元素都是正確的。

除非你可以使用> (子)選擇器,否則我認為你不能做你想要做的事情 - 它實際上沒有意義。 在您的第二個示例中, <article>不是div,因此匹配*:not(div)





css-selectors