'如果不是'CSS选择器

Question

所以这可能是雄心勃勃的,但我只想用CSS解决以下问题:

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

基本上,我正在尝试找到一种方法来使用高级CSS选择器来仅应用依赖于它是否不是其他东西的样式.就像应用这个,但只有当它不在表元素上时.这可能吗？

注意:此外,这是针对IE 8,所以如果这可以向后兼容,那就太棒了!

Answer 1

您可以使用:not()伪类,但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;
}

Answer 2

:not() 正是你要找的:

在你的情况下它是:

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

正如@ ajp15243所述,:not()IE8及更低版本不支持.

Answer 3

:notIE8不支持AFAIK

我能提供的最好的是:

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