Question

我们试图弄清楚为什么CSS继承不能按预期工作。

描述问题...我有一个可重复使用的CSS，它定义了各种背景颜色，我们根据用户配置切换页面各个部分的背景和前景。问题是，如果我的一种颜色被分配给父DIV并在CSS中进一步定义，那么它将覆盖在子DIV中定义的CSS属性。一个典型的例子就是这个JSBin示例 - JSBin link !,因为bgBlack是在CSS文件AFTER bgWhite中定义的，用户代理甚至使用bgBlack的属性来表示bgWhite DIV的内容！我们需要做到这一点，否则我们将在用户能够切换颜色等而不涉及开发人员的情况下陷入困境。非常感谢任何帮助和指导！

<!DOCTYPE html>
<html>
<head>
   <meta name="description" content="[add your bin description]" />
   <meta charset=utf-8 />
   <title>JS Bin</title>
</head>
<body class="bgDark">

  <div class="bgWhite" style="margin:100px;padding:20px;height:200px;width:200px;">
  <h1>Hello World!</h1>
  <ul>
  <li><a href="#">This is a link 1</a></li>
  <li><a href="#">This is a link 2</a></li>
  <li><a href="#">This is a link 3</a></li>
  </ul>
  </div>

</body>
</html>

AND CSS就是....

.bgWhite { background-color:white;color:black; }
.bgWhite a { color:black; }
.bgWhite a:hover { color:red; }

.bgDark { background-color:black;color:white; }
.bgDark a { color:white; }
.bgDark a:hover { color:blue; }

Answer 1

由于两组样式共享相同的specificity，因此最新编写的样式优先于匹配的元素。

Answer 2

您可以使用更具体的选择器重新覆盖属性。

body .bgWhite, .bgWhite { background-color:white;color:black; }
body .bgWhite a, .bgWhite a { color:black; }
body .bgWhite a:hover, .bgWhite a:hover { color:red; }

body .bgDark, .bgDark { background-color:black;color:white; }
body .bgDark a, .bgDark a { color:white; }
body .bgDark a:hover, .bgDark a:hover { color:blue; }

Demo

Answer 3

使用更具体的选择器。例如，在bgWhite规则中添加“div”将导致它们被使用：

http://jsfiddle.net/8QfAa/

在此处阅读特异性：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

这不是继承问题，而是优先级问题。

这两个元素都定义为.class element，所以它们同样重要。在这种情况下，将使用的CSS是最后一个要定义的CSS。

为一个定义添加优先级的简单方法是在前面添加常用内容。

示例：

html .bgWhite a { color:black; } 
html body .bgWhite a { color:black; } 
div.bgWhite a { color:black; } 
div.bgWhite a { color:black !important; } <- avoid if possible.

Answer 5

经过几个小时的麻烦，基于@GionaF提供的指针，我开始寻找一个有意义的解决方案，不需要膨胀的CSS文件或使用JavaScripts来操作。

我想我已经钉了它！在此发布解决方案，以确保社区可以获得此知识，如果其他人正在尝试创建像我们一样的完全动态体验，并且正在寻找解决方案。

Check out this JSFiddle DEMO看看我是如何解决这个问题的。总而言之，我认为在此之前发布问题之前约有40个小时致力于研究/调查，然后在此处发布问题后再增加5个小时。这可以节省45个小时，但仍能获得优雅的解决方案！希望这有助于某人。祝你好运！

CSS Cascading接管继承，如何解决这个问题？

5 个答案: