我想编写一个CSS选择器规则,选择所有没有某个类的元素 . 例如,给定以下HTML:
<html class="printable">
<body class="printable">
<h1 class="printable">Example</h1>
<nav>
<!-- Some menu links... -->
</nav>
<a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
<p class="printable">
This page is super interresting and you should print it!
</p>
</body>
</html>
我想编写一个选择器来选择所有没有"printable"类的元素,在这种情况下,它是nav和元素 .
这可能吗?
注意:在我想要使用它的实际HTML中,将会有更多的元素没有"printable"类而不是(我在上面的例子中意识到它是另一种方式) .
9 回答
:不是否定伪类
您可以使用
:not
排除匹配元素的任何子集,与普通CSS选择器一样排序 .简单示例:按类排除
div:not(.class)
将选择所有
div
元素而不使用类.class
复杂示例:按类型/层次结构排除
:not(div) > div
会选择所有
div
元素不属于另一个div
复杂示例:链接伪选择器
除了无法链接/嵌套
:not
选择器和伪元素之外,您可以与其他伪选择器一起使用 .浏览器支持等
:not
是CSS3 level selector,支持方面的主要例外是 IE9+该规范也提出了一个有趣的观点:
我认为这应该有效:
来自"negative css selector" answer .
使用:not()伪类:
用于选择除某个元素(或元素)之外的所有元素 . 我们可以使用
:not()
CSS pseudo class .:not()
伪类需要CSS
选择器作为其参数 . 选择器将样式应用于除指定为参数的元素之外的所有元素 .示例:
我们已经可以看到这个伪类的强大功能,它允许我们通过排除某些元素来方便地微调我们的选择器 . 而且,这个伪类 increases the specificity of the selector . 例如:
您可以使用前面提到的
:not(.class)
选择器 .如果您关心Internet Explorer兼容性,我建议您使用http://selectivizr.com/ .
但请记住在apache下运行它,否则你将看不到效果 .
就像贡献一样,上面的回答:not()在角度形式中非常有效,而不是创建效果或调整视图/ DOM,
确保在加载页面时,输入字段仅显示无效(红色边框或背景等),如果它们已添加数据(即不再是原始数据)但无效 .
实际上,这将选择任何没有应用css类(
class="css-selector"
)的东西 .我做了一个jsfiddle演示
Is this supported? Yes : Caniuse.com (accessed 25 Aug 2014):
支持:88.85%
部分支持:4.36%
总计:93.21%
有趣的编辑,我是谷歌搜索相反:不 . CSS否定?
通常,您将类选择器添加到
:not()
伪类,如下所示:但是如果你需要更好的浏览器支持(IE8和更旧版本不支持
:not()
),你可能最好为具有"printable"类的元素创建样式规则 . 如果你对实际标记的说法不尽如人意,那么你可能不得不围绕这个限制进行标记 .请记住,根据您在此规则中设置的属性,其中一些属性可能由
.printable
的后代继承,或者以某种方式影响它们 . 例如,尽管display
未被继承,但在:not(.printable)
上设置display: none
将阻止它及其所有后代显示,因为它会完全从布局中删除元素及其子树 . 你可以经常使用_280682来解决这个问题,这将允许可见的后代显示,但隐藏的元素仍然会像最初那样影响布局 . 总之,要小心 .正如其他人所说,你只需输入:not(.class) . 对于CSS选择器,我建议访问此链接,它在我的旅程中非常有用:https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
X:不是(选择器)
div:not(#container){
颜色:蓝色;
}
否定伪类特别有用 . 假设我想选择所有div,除了id为容器的div . 上面的代码片段将完美地处理该任务 .
或者,如果我想选择除段落标记之外的每个元素(不建议),我们可以这样做:
Example
//不透明度0.6所有“部分 - ”但不是“部分名称”