这让我疯狂:
HTML:
<div><h1>Hello World!</h1></div>
Run Code Online (Sandbox Code Playgroud)
CSS:
*:not(div) h1 { color: #900; }
Run Code Online (Sandbox Code Playgroud)
这不是读",选择所有h1具有祖先不是div元素的元素......?" 因此,"你好世界!" 不应该是红色的,但它仍然是.
对于上面的标记,添加子组合器有效:
*:not(div) > h1 { color: #900; }
Run Code Online (Sandbox Code Playgroud)
但h1如果元素不是元素的子元素,则不会影响div元素.例如:
<div><article><h1>Hello World!</h1></article></div>
Run Code Online (Sandbox Code Playgroud)
这就是为什么我想将h1元素表示为元素的后代而不是子div元素.任何人?