为了账号安全,请及时绑定邮箱和手机立即绑定

针对父/祖先元素的css否定伪类:no()

针对父/祖先元素的css否定伪类:no()

慕哥6287543 2019-06-24 13:22:17
针对父/祖先元素的css否定伪类:no()这简直把我逼疯了:HTML:<div><h1>Hello World!</h1></div>CSS:*:not(div) h1 { color: #900; }这上面写着,“选择所有h1元素的祖先不是div元素.?因此,“HelloWorld!”不应该被染成红色,但它仍然是红色的。对于上面的标记,添加子组合器可以工作:*:not(div) > h1 { color: #900; }但不影响h1如果它不是div元素。例如:<div><article><h1>Hello World!</h1></article></div>所以我想指出h1元素的后代,而不是子元素。div元素。有人吗?
查看完整描述

2 回答

?
繁星点点滴滴

TA贡献1803条经验 获得超3个赞

这上面写着,“选择所有h1元素的祖先不是div元素.“

的确如此。但在典型的HTML文档中,每一,每个 h1至少有两个祖先div元素-这些祖先不是别人bodyhtml.

这是尝试使用:not()它只是不能可靠地工作,特别是当:not()不受其他选择器(例如类型选择器或类选择器)的限制。.foo:not(div)..简单地将样式应用于所有h1元素,并使用div h1.

在……里面选择器4:not()已被增强以接受包含组合子(包括后代组合子)的完整复选择器。这是否将在快速配置文件(因此css)中实现,仍有待测试和确认,但一旦实现,则将要能够使用它排除某些祖先的元素。由于选择器的工作方式,为了可靠地工作,必须对元素本身而不是祖先进行否定,因此语法看起来有点不同:

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

任何熟悉jQuery的人都会很快指出这个选择器现在jQuery中工作。..这是第三选区之间的一些差距:not()和jQuery的:not(),选择器4试图纠正。


查看完整回答
反对 回复 2019-06-24
?
SMILET

TA贡献1796条经验 获得超4个赞

这个<html>元素不是<div>..这个<body>元素不是<div>.

所以条件“有一个祖先不是<div>“对所有元素都是正确的。

除非您可以使用>(孩子)选择者,我不认为你能做你想做的事-这是没有道理的。在第二个例子中,<article>不是div,所以匹配*:not(div)我也是。


查看完整回答
反对 回复 2019-06-24
  • 2 回答
  • 0 关注
  • 633 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信