看看这个简单的例子:
<style>
h1 {
color: red;
}
</style>
<h1>this is the 'h1'.<h2>this is the 'h2'</h2></h1>
我预计'h2'中的字符串颜色为红色,但仍然是黑色。
这让我困惑了一段时间。为什么会这样?
答案 0 :(得分:9)
不允许<h1>
元素包含<h2>
个元素(除其他元素外;仅允许phrasing elements和文本),因此根据HTML规范无效。
浏览器尝试通过考虑<h2>
实际在之外的<h1>
来尝试补偿无效的HTML,这会导致观察到的结果。
答案 1 :(得分:3)
如果您查看标记的呈现方式,您会注意到h2
标记是在h1
标记之外呈现的。
将这些标记嵌套在一起并不是正确的语法。
呈现标记
<h1>this is the 'h1'.</h1>
<h2>this is the 'h2'</h2>
尝试使用h2
切换span
并根据需要设置样式。
<强> HTML 强>
<h1>this is the 'h1'.<span>this is the 'h2'</span></h1>
<强> CSS 强>
h1.span{
/*desired styling*/
}
答案 2 :(得分:0)
您已将color属性仅设置为标记h1而不是h2。
要解决此问题,您可以编写类来为两个标记设置相同的颜色
<style>
.color1 {
color: red;
}
</style>
<h1 class="color1">this is the 'h1'.<h2 class="color1">this is the 'h2'</h2></h1>
答案 3 :(得分:0)
引自HERE
例如,HTML 4.01的DTD表示H1-H6是块级元素 内联内容模型。因此,出于布局目的,它们会出现 新行,但出于内容目的,它们不应包含其他内容 块级元素。