'如果不是' CSS 选择器答案

【问题标题】：'If not' CSS Selectors'如果不是' CSS 选择器
【发布时间】：2014-06-03 13:12:58
【问题描述】：

所以这可能是雄心勃勃的，但我正在尝试仅使用 CSS 解决以下问题：

.this-class[if-is-not-a-table], .this-class .something-else { 
    border: 1px solid red;
}

基本上，我正在尝试找到一种方法来使用高级 CSS 选择器来仅应用取决于它是否不是其他东西的样式。像这样应用它，但前提是它不在表格元素上。这可能吗？

注意：另外，这是针对 IE 8 的，所以如果它可以向后兼容，那就太棒了！

【问题讨论】：

:not(table) 应该可以工作。
请注意:not() 将无法在 IE8 或更低版本中运行，如果需要考虑旧版 IE 浏览器的兼容性。

标签： html css css-selectors

【解决方案1】：

你可以使用:not() pseudo-class，但是IE8不支持：

.this-class:not(table), .this-class .something-else { 
    border: 1px solid red;
}

谢天谢地，让它在 IE8 上工作很简单——只需将样式应用于任何带有 .this-class 的元素，然后为表格的元素覆盖它：

.this-class, .this-class .something-else { 
    border: 1px solid red;
}

table.this-class {
    border: none;
}

请注意，您的第一条规则的 .this-class .something-else 部分保持完全独立，匹配 .this-class 的后代，无论它是什么类型的元素。如果这是有意的，您可以保持该部分不变。否则，如果您希望样式应用于 .this-class 的后代具有相同的条件，则需要相应地重复该条件。

使用:not()：

.this-class:not(table), .this-class:not(table) .something-else { 
    border: 1px solid red;
}

并使用覆盖（对于 IE8）：

.this-class, .this-class .something-else { 
    border: 1px solid red;
}

table.this-class, table.this-class .something-else {
    border: none;
}

【讨论】：

也感谢您的解释！

【解决方案2】：

:not() 就是您要找的：

在你的情况下是：

.this-class:not(table), .this-class .something-else {

正如@ajp15243 所述，:not() 在 IE8 及更低版本中不受支持。

【讨论】：

【解决方案3】：

IE8 不支持 AFAIK :not

我能提供的最好的是：

.this-class { 
    border: 1px solid red;
}
table.this-class {
    border: 1px solid black;
}

【讨论】：

对于任何想知道的人来说，table.this-class 中使用的值基本上就是如果没有在.this-class 中设置的值。这取决于用例 - 它可能不一定是 border: 0 none 的初始值。

【解决方案4】：

您可以使用:not() 选择器。换句话说：

.this-class:not(table), .this-class .something-else { 
    border: 1px solid red;
}

一个通用示例：JSFiddle

【讨论】：

【解决方案5】：

您可以使用:notselector。

.this-class:not(table) { border: 1px solid red }

Jsfiddle example

【讨论】：