css选择器

### 1、复合选择器

概述：由两个或多个基础选择器通过不同的方式组合而成的选择器

#### 1.1 后代元素选择器

- 语法：

  ```css
  E F {
      样式声明;
  
  }
  ```

- 描述：【空格】连接一个或多个选择器

- 作用： 选择E元素内部包含的所有F元素

- 代码示例：

  ```css
  .box span{
    background-color:red;
  }
  
  <div class="box">
    <span>span1是子元素</span>
    <p>
      <span>span2是子元素的子元素</span>
    </p >
  </div>
  //.box内部的所有span变成了红色，包含在.box内部的通称为后代
  ```

#### 1.2 子元素选择器

- 语法

  ```css
  E > F {
      样式声明; 
  }
  ```

- 描述：【大于】号 连接一个或多个选择器

- 作用： 选择E元素内部包含的所有直接子元素F（第一嵌套层级）
  
- 实例演示:
  
  ```c