子选择器

Coddy CSS 选择器课程的第 7 课，共 15 课。

子选择器是一种 CSS 选择器，用于选择指定元素的所有直接子元素。子选择器由两个选择器之间的一个大于号（>）表示。

示例：

来看下面的 HTML 结构：

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

要选中直接子段落，可以使用子组合符，如下所示：

.parent > p {
    color: blue;
}

在这个示例中，只有直接子段落会变成蓝色，嵌套在内部 <div> 中的段落不会变色。

你也可以使用子选择器，避免为不是指定元素直接子元素的元素设置样式。例如，你可以使用子选择器，将作为 p 元素直接子元素的所有链接设置为红色。

挑战

简单

给定以下 HTML 结构，使用子选择器创建一条 CSS 规则，将 <ul> 元素内的直接列表项的背景颜色设为黄色。

亲手试试

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

CSS 选择器中的所有课

1CSS 选择器简介

CSS 选择器的作用为什么它们很重要？

4属性选择器

属性选择器简介存在性和值完全匹配属性值选择器属性值选择器 II 属性值选择器 III

2简单选择器

类型选择器类选择器 ID 选择器通用选择器

3组合选择器

子选择器后代选择器相邻兄弟选择器通用兄弟选择器

自己练习： Web 在线编辑器