CSS继承古怪答案

【问题标题】：CSS inheriting odditiesCSS继承古怪
【发布时间】：2010-06-26 04:44:38
【问题描述】：

我经常遇到这种情况，这很烦人。有谁知道这个：

#content h5 {
color:red;
}

#next h5 {
color:blue;
}

当标记看起来像这样时：

<div id="content>
  <h5>RED</h5>

  <div id="next">
    <h5>BLUE</h5>
  </div>
</div>

蓝色的h5实际上会显示为红色，这是什么原因？！

【问题讨论】：

您的标记中有错字，id="content" 需要一个结束引号（假设这只是示例中的错字）。在jsfiddle.net/AWVdY jsfiddle.net/AWVdY，这个概念对我来说在 Chrome、Firefox 和 IE 8 中运行良好，您使用的是什么浏览器？

标签： css css-selectors

【解决方案1】：

我对此没有任何问题。但是，您确实在内容之后缺少引号。以下是我测试过的

<html>
<head>
<style>
#content h5 {
color:red;
}

#next h5 {
color:blue;
}
</style>
</head>
<body>
<div id="content">
  <h5>RED</h5>

  <div id="next">
    <h5>BLUE</h5>
  </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

No, it won't.

【讨论】：

【解决方案3】：

这是因为所谓的 CSS 特异性，这里有一个很好的教程：

Specifics On CSS Specificity

【讨论】：