Dav*_*all 607 html css css-selectors
我想编写一个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>
我想编写一个选择器来选择所有没有"可打印"类的元素,在这种情况下,它是nav和元素.
这可能吗？
注意:在我想要使用它的实际HTML中,将会有更多的元素没有 "可打印"类而不是(我在上面的例子中意识到它是另一种方式).
Bol*_*ock 853
通常,您将类选择器添加到:not()伪类,如下所示:
:not(.printable) {
/* Styles */
}
但是,如果你需要更好的浏览器的支持(IE8及以上不支持:not()),你可能会更好过该元素创建样式规则不具备"打印"的类.如果你对实际标记的说法不尽如人意,那么你可能不得不围绕这个限制进行标记.
请的是,这取决于你在这个规则设置的属性,其中一些既可以由后代继承的头脑是 .printable,或以其他方式影响他们的这种或那种方式.例如,虽然display没有继承,但是设置display: noneon :not(.printable)会阻止它及其所有后代显示,因为它会完全从布局中删除元素及其子树.你可以经常使用它visibility: hidden来改变它,这将允许可见的后代显示,但隐藏的元素仍然会影响它们最初的布局.总之,要小心.
Mil*_*ern 161
:not([class])
实际上,这将选择任何没有class="css-selector"应用css class()的东西.
我做了一个jsfiddle演示
h2 {color:#fff}
:not([class]) {color:red;background-color:blue}
.fake-class {color:green} <h2 class="fake-class">fake-class will be green</h2>
<h2 class="">empty class SHOULD be white</h2>
<h2>no class should be red</h2>
<h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
<h2 class="">empty class2 SHOULD be white</h2>
<h2>no class2 SHOULD be red</h2>这支持吗？ 是:Caniuse.com(2014年8月25日访问):
有趣的编辑,我是谷歌搜索相反:不.CSS否定？
selector[class] /* the oposite of :not[]*/
SW4*_*SW4 105
:not否定伪类否定CSS伪类
:not(X)是一个函数符号,它将一个简单的选择器X作为参数.它匹配一个未由参数表示的元素.X不得包含另一个否定选择器.
您可以使用:not排除匹配元素的任何子集,按照普通CSS选择器的顺序排序.
div:not(.class)
将选择div没有类的所有元素.class
div:not(.class) {
color: red;
}<div>Make me red!</div>
<div class="class">...but not me...</div>:not(div) > div
会选择所有不div属于另一个孩子的元素div
div {
color: black
}
:not(div) > div {
color: red;
}<div>Make me red!</div>
<div>
<div>...but not me...</div>
</div>除了无法链接/嵌套:not选择器和伪元素之外,您可以与其他伪选择器一起使用.
div {
color: black
}
:not(:nth-child(2)){
color: red;
}<div>
<div>Make me red!</div>
<div>...but not me...</div>
</div>:not是一个CSS3级别的选择器,支持方面的主要例外是它是IE9 +
该规范也提出了一个有趣的观点:
在
:not()伪允许写入无用的选择.例如:not(*|*),它根本不代表任何元素,或者foo:not(bar)等同于foo但具有更高的特异性.
就像贡献一样,上面的答案:not()在角形式中非常有效,而不是创建效果或调整视图/ DOM,
input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}
确保在加载页面时,输入字段仅显示无效(红色边框或背景等),如果它们已添加数据(即不再是原始数据)但无效.
小智 8
如果您希望特定的类菜单在缺少登录类的情况下具有特定的 CSS ：
body:not(.logged-in) .menu {
display: none
}
例
[class*='section-']:not(.section-name) {
@include opacity(0.6);
// Write your css code here
}
//不透明度0.6全部为“ section-”，而不是“ section-name”
:not()伪类：用于选择除某个元素（或多个元素）之外的所有内容。我们可以使用:not() CSS伪类。伪类:not()需要一个CSS选择器作为其参数。选择器会将样式应用于除指定为参数的元素之外的所有元素。
/* This query selects All div elements except for */
div:not(.foo) {
background-color: red;
}
/* Selects all hovered nav elements inside section element except
for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
background-color: red;
}
/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) {
color: red;
}<div>test</div>
<div class="foo">test</div>
<br>
<section>
<nav id="foo">test</nav>
<nav>Hover me!!!</nav>
</section>
<nav></nav>
<br>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>我们已经可以看到这个伪类的强大功能，它允许我们通过排除某些元素来方便地微调选择器。此外，这个伪类增加了选择器的特异性。例如：
/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
color: red;
}
/* This selector is lower in the cascade but is overruled by the style above */
#foo {
color: green;
}<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>| 归档时间： |
|
| 查看次数： |
431683 次 |
| 最近记录： |