★文章内容学习来源：拉勾教育大前端就业集训营

CSS3 中，相对于 CSS2.1 版本的 7 个选择器（具体见以前文章）：
【15】CSS基础（2）——选择器①基础选择器
【16】CSS基础（2）——选择器②高级选择器
【17】CSS基础（2）——选择器③选择器权重
CSS3 增加了 更多其他的选择器，实现了更多的选择方式。

CSS3 新增选择器：
• 子级选择器 • 兄弟选择器 • 结构伪类选择器 • 伪元素选择器 • 属性选择器
本篇讲解：子级选择器

一、子级选择器

1.介绍

子级选择器 具体含义
用于 选取带有特定父元素的元素
书写语法 element1 > element2

2.注意

  • ①如果 element2元素不是父元素element1的直接子元素，则不会被选择。（ 比如下面举例中的.box > p 只选中了直接在子元素p，而没有选中.box中的.inner中的p）
  • ② >符号之前书写父级的选择器，>符号之后写子级选择器，必须满足父子级关系才能选中标签。

3.举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>举例：子级选择器</title>
  <style> .box > p {
     /*选中情况见效果图*/ background-color: pink; } .inner > p {
     /*选中情况见效果图*/ color: red; } </style>
</head>
<body>
  <div class="box">
    <p>这是 box 中的 p 标签元素</p>
    <p>这是 box 中的 p 标签元素</p>
    <div class="inner">
      <p>这是 inner 中的 p 标签元素</p>
    </div>
  </div>
  <p>这是一个单独的 p 标签元素</p>
</body>
</html>

下篇继续：【35】CSS3（1）—— 新增选择器②兄弟选择器