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

标签 css css-selectors

更新:这可能是不可能的。我仍在寻找解决方案。

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

重要提示:如果首先将任何样式应用于 .exception 及其后代,然后我需要手动将其覆盖为初始值,则解决方案并不好! 我根本不想将任何样式应用于 .exception 和/或其后代!

期望的结果

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

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

enter image description here enter image description here


使用 :not 选择器的解决方案 - 不完美

这个解决方案不够好,因为它会排除 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

最佳答案

如何将 background:inherit 传递给它的 child ?

*{
    background-color:white
}

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

.exception *{
    background:inherit;
}

JSFiddle

关于css - 如何选择除特定元素及其所有后代之外的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23698584/

相关文章:

html - 如何通过css选择所有输入元素?

php - 在 CSS 中使用 "if/else"改变语言

Javascript modal 需要点击两次才能打开

css3 选择器和伪类

css - 什么是分组 CSS 选择器的需求

jquery - 从 "value"到 "value"中选择

html - CSS - 顶部带有 90º 曲线的边框

javascript - 使元素随着鼠标移动而移动

css - float 一个 div 使图像在页面中心对齐

html - 为什么内联 block 渲染略低于比较 block ?