后代选择器

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 2 课，共 43 课。

第一个选择器是后代选择器。当我们想要设置另一个元素内部的元素的样式时，就会用到它，即使这些元素嵌套得很深。例如，一个容器内有两个段落。

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

现在，我们用后代选择器来设置 div 中所有段落的样式：

.container p {
    color: blue;
}

.container div 中的所有段落都会变成蓝色，包括嵌套在 section 元素中的段落。

挑战

简单

创建一条 CSS 规则，选中类名为 "navigation" 的元素的所有后代列表项（<li>），并将它们的文字颜色改为紫色。

亲手试试

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>