如何选择除特定元素及其所有后代之外的所有元素

时间:2014-05-16 15:04:07

标签: css css3 css-selectors

更新:这可能无法实现。我仍在寻找解决方案。

我需要创建一个CSS选择器,使用*选择所有页面元素,这将排除.exception元素及其所有后代(!)。此.exception元素及其后代需要隐藏其初始样式,而*样式应应用于所有其他页面元素。

重要提示:如果首先将任何样式应用于.exception及其后代,那么解决方案就不好了,然后我需要手动将其覆盖为初始值! 我不想将任何风格应用于.exception及/或其后代全部!

期望的结果

请记住,这只是一个微不足道的例子。我需要应用解决方案的页面包含更多元素,因此我需要通用解决方案来过滤元素。那里不可能手动选择和覆盖元素。

http://jsfiddle.net/zV5gf/2/(初始状态,无解决方案)

enter image description here enter image description here


解决方案:不是选择器 - 不完美

这个解决方案不够好,因为它会排除li.exception,但它不会排除它的后代。 li.exception后代的初始样式将丢失。

http://jsfiddle.net/zV5gf/3/

*:not(.exception){
    background-color:orange !important;
}

并且div.exception及其后代的逻辑解决方案不起作用(浏览器不支持):

*:not(.exception *){
    background-color:orange !important;
}

enter image description here enter image description here

3 个答案:

答案 0 :(得分:4)

如何将background:inherit放到其子女身上?

*{
    background-color:white
}

*:not(.exception){ 
    background-color:red
}

.exception *{
    background:inherit;
}

JSFiddle

答案 1 :(得分:0)

如果你可以使用jquery,这是动态的。

$(".exception").find("*").addClass("exception");

Fiddle

答案 2 :(得分:0)

无论如何,你要提到差异化的颜色,然后我们使用'background:inherit'。而不是简单地使用下面的

*:not(.exception) {
    background-color: red;
}
.exception, .exception * {
    background-color: white;
}