- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是 CSS3 的官方文档 :not()
伪类:
http://www.w3.org/TR/css3-selectors/#negation
以及提议的 CSS 选择器 4 级增强功能:
http://dev.w3.org/csswg/selectors4/#negation
我一直在搜索 :not()
的实现和浏览器支持,但我发现的唯一示例是单个元素或元素的直接子元素,例如:
div *:not(p) { color: red; }
上面的例子适用于 <p>
是 <div>
的直系子代, 但它在 <p>
时不起作用是 <div>
的更远的后代.
div :not(p) {
color: red;
}
<div>
<ul>
<li>This is red</li>
</ul>
<p>This is NOT</p>
<blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>
如果答案在上面的官方文档中,那我没找到/没看懂。正如我所说,我搜索了这个网站和网络,但找不到任何关于支持或不支持 :not() 作为另一个元素的孙子元素的讨论。
这是否应该像我认为的那样工作?
最佳答案
Is this supposed to work like I think it should?
不,您看到的行为是正确的。
在你的最后一个例子中,虽然 <blockquote>
包含 <p>
, 这是 <blockquote>
本身匹配 *:not(p)
,以及它必须是 <div>
的后代的条件,它是。该样式仅应用于 <blockquote>
, 但它随后被 <p>
继承里面。
<p>
元素本身仍然算作否定,所以 <p>
本身仍然被排除在您的选择器之外。它只是从其父项 <blockquote>
继承文本颜色元素。
即使它的相对接近的祖先都没有匹配选择器,您仍然有像 html
这样的元素和 body
也要担心——尽管你可能只是加上一个 body
开头的选择器:
body div...
这就是为什么我经常强烈建议不要使用 :not()
用于过滤后代的选择器,尤其是当未使用类型选择器限定时(如您的示例中的 div
)。它不像大多数人期望的那样工作,并且使用像 color
这样的继承属性只会使问题复杂化,甚至让作者更感到困惑。有关更多示例,请参阅我对这些其他问题的回答:
所描述问题的解决方案是简单地为 <p>
应用不同的颜色。元素。由于继承,您将无法简单地使用选择器排除它们:
/* Apply to div and let all its descendants inherit */
div {
color: red;
}
/* Remove it from div p */
div p {
color: black;
}
在选择器级别 4 上:是,:not()
确实得到了增强,可以接受包含组合子的完全复杂的选择器。本质上,这意味着(一旦浏览器开始实现它)您将能够编写以下选择器并让它完全按照您的意愿执行:
p:not(div p) {
color: red;
}
如果有人感兴趣,这在今天的 jQuery 中有效。
关于css - 是CSS :not() selector supposed to work with distant descendants?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42636076/
关闭。这个问题需要details or clarity .它目前不接受答案。 想要改进这个问题吗? 通过 editing this post 添加详细信息并澄清问题. 关闭去年。 Improve th
我是 Kotlin 的新手,我正在使用它。我非常想创建一个非常基本的事件总线。所以我想出了这个 interface Event interface EventListener { fun ha
我有这种带有 div 和链接的复杂设置。无论如何,当您将鼠标悬停在我页面左上角的 Logo 时,它应该会发生变化,而且确实如此。但是,如果您的鼠标移动到页面顶部的任何位置(图像上以红色标出),它也会发
我正在尝试使用 cvPerspectiveTransform 来转换四个 2D 点。我已经通过 cvFindHomography 获得了变换矩阵 (3x3)。我不知道要提供什么样的结构才不会遇到错误。
这是一个错误还是有文档表明不要在指令名称中使用后缀“start”?只有“完成”指令有效。 HTML: ... Angular doesn't like the suffix 'start'
我是 jQuery 新手,但只是尝试创建一个可用于过滤表的函数。我已经设置了表格,以便我可以按类选择所有行(效果很好)并在结果上调用each()。在每个()的回调中我有这个 if 语句: if ($(
苹果和橙子的问题。 12 个测试用例中只有 3 个被清除。几个小时后就想不出其他事情了。 示例输入0 7 11 5 15 3 2 -2 2 1 5 -6 示例输出 0 1 1 问题:https://w
我正在尝试在 Netbeans 中正确设置保存时部署(或保存时编译,或任何我应该设置的)。 我正在努力实现这一目标: 1) 如果结构没有改变,需要时热替换一些类(按下按钮,新代码替换旧代码) 2) 在
由 XCode 向导创建的主从项目包含 tableView:cellForRowAtIndexPath: 的实现,它调用 dequeueReusableCellWithIdentifier:forIn
Internet Explorer 9 无法正确显示绝对定位的元素。父级是相对的,所以绝对元素相对于父级div应该是“绝对”的。但是,它的行为更接近“固定”行为。当我尝试在相关元素上触发 hasLay
我对 WM_PAINT 有疑问。基本上我希望在用户 WM_COMMAND 之后调用 WM_PAINT,但由于某种原因它在主函数中仍然被调用。 case WM_PAINT: { cr
我正在尝试来自 Android 应用程序开发傻瓜 的示例,这是一个简单的应用程序,可以切换手机的铃声模式。代码如下。 public class SilentModeToggleActivity ext
根据广为流传的建议,我应该注意让我的大型软件项目尽可能模块化。当然有多种方法可以实现这一点,但我认为没有办法绕过使用更多或更少的接口(interface)类。 以使用 C++ 开发 2D 游戏引擎为例
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我在 Rails 3 应用程序中保存哈希时遇到问题。使用控制台时我可以保存它 - 当我通过表单提交哈希时它不起作用。 This SO question addresses它但解决方案对我不起作用。此外
在 CDA R2 CCD 实现指南中,ClinicalDocument 元素(文档的根元素)应该有一个 id 元素。 此 id 元素属于“II”数据类型:http://wiki.hl7.no/inde
我使用g++进行编译时没有任何选项,该程序可在1分钟左右运行。 但是,使用-O3进行编译会使它在大约1-2秒内运行。 我的问题是加快速度是否正常?还是我的代码可能太糟糕了,以至于优化可能会占用很多时间
我有一个基于 HTML 表单的调查问卷,我正试图将其放在一起。当我遇到 float 元素问题时,我已经使用 CCS 排列了所有 HTML 表单元素。 我有一个包含一些表单元素的 DIV,我想将它们放在
以下代码在 Clang 中编译良好并输出 int [3] 数组的大小 #include int main() { const int (&a)[] = { 1, 2, 3 }; std::c
我正在尝试运行以下代码: Cluster cluster = new Cluster(); cluster.add("localhost", port_number); Client client =
我是一名优秀的程序员,十分优秀!