CSS 中子选择器的 CSS 属性

Question

我不认为我完全理解 CSS 的父子关系。对于以下 html，我设置了以下 CSS 属性：

#formContainer{
    text-align: center;
}

.announcement{
    text-align: right;
}

但是，#formContainer 中的所有文本，包括.announcement，都与中心对齐。如何正确设置 CSS 以使 .announcement 中的文本向右对齐？

    <div class="flex-container">
        <div id="mainBody">
            <div id="formContainer">
                <div class="announcement">
                    <p>Announcement</p>
                </div>
                <div>
                    <input id="email" type="email" name="email">
                    <input id="submit" type="submit" name="submit">
                </div>
                <div class="announcement">
                    <p>Register for our mailing list!</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

在我看来，CSS 正在按照您的要求执行。

#formContainer 中有两个 .announcement 类 div。在你的CSS中你这样做：

.announcement{
    text-align: right;
}

这意味着您的 html 中带有课程公告的每个 div 都将使其文本右对齐。

如果您只想定位 #formContainer 内部的 .announcement，您可以这样做：

#formContainer .announcement{
    text-align: right;
}

这意味着您只针对 .announcement 中的 #formContainer div 类。您的 HTML 中没有其他 .announcement 类将获得此类，除非它位于 ID 为 #formContainer 的 div 内。

如果您只想定位直接子级，或者您的 #formContainer div 中的第一个 .announcement 类，您可以这样做：

#formContainer > .announcement{
    text-align: right;
}

这意味着您现在只针对直接或第一个具有类 .announcement 的子级，该子级直接位于 id 为 #formContainer 的 div 之后。没有其他 div，在 #formContainer 内部或外部，.announcement 类将成为目标。

有意义吗？