0

我们在试图弄清楚为什么 CSS 继承不能按预期工作时遇到了困难。

为了描述这个问题......我有一个可重用的 CSS，它定义了各种背景颜色，我们根据用户配置切换页面各个部分的背景和前景。问题是，如果我的一种颜色被分配给父 DIV 并在 CSS 中进一步定义，那么它会覆盖在子 DIV 中定义的 CSS 属性。一个很好的例子是这个 JSBin 示例 - JSBin 链接！，因为 bgBlack 是在 bgWhite 之后的 CSS 文件中定义的，所以用户代理使用 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>

和 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; }
4

5 回答 5

2

因为两组样式具有相同的特异性，所以最新编写的样式优先于匹配的元素。

于 2012-10-12T15:26:50.503 回答
1

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

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; }

演示

于 2012-10-12T15:28:06.187 回答
1

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

http://jsfiddle.net/8QfAa/

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

于 2012-10-12T15:31:12.813 回答
0

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

两个元素都定义为.class element，因此它们同样重要。在这种情况下，将使用的 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.
于 2012-10-12T15:30:42.263 回答
0

经过数小时的折腾，并根据@GionaF 提供的指针，我着手寻找一个有意义的解决方案，该解决方案不需要臃肿的 CSS 文件或使用 JavaScript 来操作事物。

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

看看这个 JSFiddle DEMO看看我是如何解决这个问题的。总而言之，我将大约 40 小时的时间用于研究/调查，然后再在这里发布问题，然后在此处发布问题后额外 5 小时左右。这是一个很好的 45 小时，一个人可以节省并仍然获得一个优雅的解决方案！希望这可以帮助某人。祝你好运！

于 2012-10-12T21:15:49.040 回答