子选择器

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

子选择器（ > ）用于设置某个元素的直接子元素的样式。与后代选择器不同，它只选择直接子元素，不选择更深层级的元素。

例如：

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

仅为直接子元素应用样式：

.parent > p {
  color: red;
}

应用此 CSS 后，只有第一个段落 "This is a direct child" 会变成红色。第二个段落不会受到影响，因为它不是 class 为 "parent" 的 div 的直接子元素。

挑战

简单

你有一个包含多个团队部分的 .team-container。你的任务是：

使用子选择器，为 .team-container 内的直接子级 div 设置浅蓝色背景、10px 内边距和 5px 外边距。
使用子选择器，为 .team div 内的直接子级 <h3> 元素设置绿色文字和 20px 字体大小。

亲手试试

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>