h1标签样式仅部分生效求助：部分标签显示不符合预期

我的代码中第一个<h1>标签样式符合预期，但第二个和第三个<h1>标签样式异常：第二个未呈现标题样式，仅显示普通小文本；第三个尺寸过大。相关代码如下：

CSS代码 #

h1 {
    color: #2B2B2B;
    white-space: normal;
    word-break: break-all;
    font-family: Georgia;
    text-align: center;
}

原始HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <img src="Logo.png" alt:"">
    <div class="container">
        <nav>
            <ul>
                <li>About Us</li>
                <li>Services</li>
                <li>Continuing Education Courses</li>
                <li>Support Groups & Workshops</li>
                <li>First Appointment & Fees Insurance</li>
                <li>Blog</li>
                <li>Contact</li>
            </ul>
        </nav>
        <hr>
        <div class="profile-box">
            <img src="Group 1.png" alt="" align="center" width="300px" height="100px">
            <main>
                <section>
                    <h1>Grounding and Resourcing Technique Giveaway</h1>
                    <h2>
                        Being a mental health clinician can be such an empowering and rewarding role. You can change,
                        help, and nourish so many of those struggling with everyday life. Through the responsibilities
                        you take on while helping others, it’s so important to practice grounding and resourcing
                        techniques with your clients.
                    </h2>
                </section>

                <div class="child-one child" <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for
                    grounding and resourcing methods.</h1>
                    <img src="Rectangle 817.png" alt="" align="left">
                    <h2>
                        Learn ways to keep your client grounded by establishing comfortability, learning breathing and
                        body awareness techniques, object-based resourcing, and so much more. This handout will help you
                        overcome some of those challenges you face daily as a mental health clinician while working with
                        clients.
                    </h2>
                    <hr>
                    <h1>Simply fill out the form below to download.</h1>
                    <h2>You will be sent a copy to your email.</h2>
                </div>
            </main>
        </div>
    </div>
</body>
</html>

问题根源 #

完全是HTML语法错误导致的：

• 第二个<h1>所在的<div class="child-one child"标签未闭合（缺少结尾的>），浏览器将这个<h1>解析成了div标签的属性内容，而非独立的标题元素，因此无法应用h1的样式，显示为普通文本。
• 由于div标签未闭合，浏览器的错误恢复机制会将后续的<hr>、第三个<h1>等元素错误嵌套进前一个结构，叠加默认样式后导致第三个h1尺寸异常。

修复后的完整HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <img src="Logo.png" alt="">
    <div class="container">
        <nav>
            <ul>
                <li>About Us</li>
                <li>Services</li>
                <li>Continuing Education Courses</li>
                <li>Support Groups & Workshops</li>
                <li>First Appointment & Fees Insurance</li>
                <li>Blog</li>
                <li>Contact</li>
            </ul>
        </nav>
        <hr>
        <div class="profile-box">
            <img src="Group 1.png" alt="" align="center" width="300px" height="100px">
            <main>
                <section>
                    <h1>Grounding and Resourcing Technique Giveaway</h1>
                    <h2>
                        Being a mental health clinician can be such an empowering and rewarding role. You can change,
                        help, and nourish so many of those struggling with everyday life. Through the responsibilities
                        you take on while helping others, it’s so important to practice grounding and resourcing
                        techniques with your clients.
                    </h2>
                </section>

                <div class="child-one child">
                    <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
                    <img src="Rectangle 817.png" alt="" align="left">
                    <h2>
                        Learn ways to keep your client grounded by establishing comfortability, learning breathing and
                        body awareness techniques, object-based resourcing, and so much more. This handout will help you
                        overcome some of those challenges you face daily as a mental health clinician while working with
                        clients.
                    </h2>
                    <hr>
                    <h1>Simply fill out the form below to download.</h1>
                    <h2>You will be sent a copy to your email.</h2>
                </div>
            </main>
        </div>
    </div>
</body>
</html>

额外修正点 #

• 修复了<img src="Logo.png" alt:"">中alt属性的语法错误，将冒号:改为等号=，符合HTML属性规范。

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