子CSS样式在不应该覆盖父样式时

时间:2012-04-29 07:53:57

标签: css inheritance browser

以下是真实HTML的简化版本:

<html>
<head>
<style type="text/css">
        h3 { background: blue; }
        p {background:grey; }
    </style>
</head>
<body>
    <h3>The paragraph below will style correctly.</h3>
    <p>
        As you can see, I am stylish.</p>
    <p>
        <h3>But this paragraph goes wrong.</h3>
        I am sad. I have no style.
    </p>
</body>
</html>

在浏览器中尝试(尝试过Firefox 12和IE9),第一段获得灰色背景,第二段没有。请注意,它甚至没有蓝色背景,样式已经丢失。我的理解是,h3的背景应影响h3,而不是向上移动到父级并影响它。

我错过了什么吗?注意以上是简化的。我想在我的段落中使用标题,但如果没有样式错误,这似乎是不可能的。上面有错吗?感谢。

1 个答案:

答案 0 :(得分:3)

在段落中包含标题是无效的标记,这就是样式被搞砸的原因。

您可以在此处验证您的标记:http://validator.w3.org/