Question

是否有任何关于如何在CSS选择器中使用not（）语法的资源？

如：

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

如果是这样，请回答一个链接和一些解释？

Answer 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 not（）包括：Smashing Magazine: Take Your Design To The Next Level With CSS3

Answer 2

Decent explanation here

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

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

或

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

Answer 3

here's a link

我认为它只适用于FF和Safari，而不是IE中的

Answer 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') }

哪不会。

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

如何在CSS选择器中使用not（）语法？

4 个答案: