cha*_*les 64 html css css-selectors css3
这让我疯狂:
HTML:
<div><h1>Hello World!</h1></div>
CSS:
*:not(div) h1 { color: #900; }
这不是读",选择所有h1具有祖先不是div元素的元素......？" 因此,"你好世界!" 不应该是红色的,但它仍然是.
对于上面的标记,添加子组合器有效:
*:not(div) > h1 { color: #900; }
但h1如果元素不是元素的子元素,则不会影响div元素.例如:
<div><article><h1>Hello World!</h1></article></div>
这就是为什么我想将h1元素表示为元素的后代而不是子div元素.任何人？
Bol*_*ock 76
这不是读",选择所有
h1具有祖先不是div元素的元素......？"
确实如此.但是在一个典型的HTML文档中,每个 h1都至少有两个不是div元素的祖先 - 而且那些祖先都是body和html.
这是尝试使用过滤器过滤器的问题:not():它只是不能可靠地工作,尤其是当:not()它没有被某些其他选择器(例如类型选择器或类选择器)限定时,例如.foo:not(div).只需将样式应用于所有h1元素并覆盖它们,您就会轻松自如div h1.
在Selectors 4中,:not()已经增强,可以接受包含组合子的完整复杂选择器,包括后代组合子.这是否将在快速配置文件(以及CSS)中实现仍有待测试和确认,但一旦实现,您将能够使用它来排除具有某些祖先的元素.由于选择器如何工作,必须在元素本身而不是祖先上进行否定才能可靠地工作,因此语法看起来会有所不同:
h1:not(div h1) { color: #900; }
任何熟悉jQuery的人都会很快指出这个选择器今天在jQuery中运行.这是Selector 3 :not()和jQuery 之间的一些差异:not()之一,Selectors 4试图纠正这些差异.
Ric*_*dle 14
该<html>元素不是<div>.该<body>元素不是<div>.
因此,<div>对于所有元素,"具有非祖先的祖先"的条件都是正确的.
除非你可以使用>(孩子)选择器,否则我认为你不能做你想要做的事情 - 它没有多大意义.在你的第二个例子中,<article>不是div,所以也匹配*:not(div).
| 归档时间： |
|
| 查看次数： |
29557 次 |
| 最近记录： |