CSS声明疑问：为何我的h3元素无法显示为绿色？

你的问题出在HTML结构不符合规范，浏览器会自动调整DOM结构，让你的CSS选择器无法匹配到目标元素。

具体原因 #

HTML规范里，<p>是段落元素，它不能包含<h3>这类块级标题元素。当浏览器解析到你写的<p>里嵌套<h3>时，会自动把<h3>从<p>里“拆出来”，最终实际渲染的DOM结构会变成这样：

<h1 class="blue">
  <p>blue</p>
  <h3>green</h3>
</h1>

这时候你的CSS选择器.blue p h3就找不到任何元素了——因为h3已经不在p标签内部了。

解决方法 #

1. 修正HTML结构（关键）

把<p>替换成能容纳块级元素的容器（比如<div>），或者调整成更合理的标题/内容层级：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="chapter3.css">
    </head>
    <body>
        <h1 class="blue">
            <div>blue
                <h3>green</h3>
            </div>
        </h1>
    </body>
</html>

或者更符合语义的结构（标题不嵌套标题，段落与标题分开）：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="chapter3.css">
    </head>
    <body>
        <div class="blue">
            <h1>blue</h1>
            <h3>green</h3>
        </div>
    </body>
</html>

2. 对应调整CSS选择器

如果用第一种修正后的结构，CSS可以保留或简化：

.blue div {
    color: blue;
}

.blue div h3 {
    color: green;
}

如果用第二种结构，CSS可以写成：

.blue h1 {
    color: blue;
}

.blue h3 {
    color: green;
}

额外提示 #

严格遵循HTML嵌套规则：<p>、<span>这类元素不能嵌套块级元素，标题元素（h1-h6）也不建议互相嵌套，否则浏览器的自动修正会让DOM结构和你写的不一致，导致CSS或JS逻辑失效。

内容的提问来源于stack exchange，提问作者Meester Moo