如何在 CSS 选择器中使用 not() 语法？答案

【问题标题】：How do I use the not() syntax in a CSS selector?如何在 CSS 选择器中使用 not() 语法？
【发布时间】：2013-01-28 08:02:38
【问题描述】：

有没有关于如何在 CSS 选择器中使用 not() 语法的资源？

如：

.container[orient="landscape"] > *:not(.toolbar)

如果可以的话，你能回答一个链接和一些解释吗？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

虽然 :not() 伪类在某些情况下很有用，但它不被最新的浏览器支持，因为它是 CSS 3 规范的一部分。 Firefox 2 和 3、Opera、Safari、Chrome 和其他基于 Gecko 和 Webkit 的浏览器支持它，而基于 Trident 的浏览器 (Internet Explorer) 不支持它。

此时使用 CSS 的“级联”部分可能是一个更好的主意：

.container[orient="landscape"] * { ... }
.toolbar {...}

使用 .toolbar 选择器覆盖 .container 选择器。

我还应该指出，旧浏览器不支持使用属性选择器[orient="landscape"]，尤其是 IE 6 及更低版本。

这是一个很好的 CSS 3 特性指南，包括：not()：Smashing Magazine: Take Your Design To The Next Level With CSS3

【讨论】：

【解决方案2】：

Decent explanation here.

不完全知道你想用你的例子来完成什么，但它可能看起来更像

.container[orient="landscape"]:not(.toolbar)

或

.container[orient="landscape"] > :not(.toolbar)

【讨论】：

第二个选择器与给定的选择器相同。

【解决方案3】：

here's a link

我认为它只适用于 FF 和 safari，在 IE 中不太适用

【讨论】：

【解决方案4】：

我想分享一个关于组合伪类的观察，这可能对未来寻求使用 :not() 信息的人有用。将 :not() 与 :first-line 伪类结合使用时，我发现 :not() 必须首先列出，然后是 :first-line，而不是相反。在以下 css 示例中：

.content h1 {
    font-size: 36px;
    line-height: 34px;
    text-transform: uppercase;
    font-weight: bold;
}
.content h1:not(.second):first-line {
    color: #971d2d;
}
.content h1.first {
    color: #444;
}
.content h1.second {
    color: #666;
}
.content h1.second:first-letter {
    color: #030303;
}

将“:not(.second)”放在“:first-line”之后不仅不能正常工作，还会对其他声明产生不利影响级联。

将您的语法想象成与您使用脚本语言时的顺序相同。因此是这样的：

if ( $('h1') && !$('.second') ) {
    this.usePseudoClass(':first-line');
}

完成任务会合乎逻辑，而不是像这样：

if ($('h1:first-line') {
    !(this.useClass('.second')
}

不会的。

干杯，希望此输入对其他人有所帮助。

【讨论】：