下面是真实 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，而不是向上进入父级并影响它。
我错过了什么吗？注意上面是简化的。我想要段落中的标题，但如果没有样式错误，这似乎是不可能的。上面有错误吗？谢谢。
最佳答案
在段落中包含标题是无效的标记，这就是样式被搞砸的原因。
您可以在此处验证您的标记:http://validator.w3.org/
关于css - 子 CSS 样式在不应该覆盖父样式时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10370581/