目标

• 什么是复合选择器
  • 后代选择器
  • 并集选择器
• 如何使用后代选择器进行选择并且添加样式
• 如何使用并集选择器进行选择并且添加样式
• 使用伪类选择器

1. CSS复合选择器

CSS选择器分为基础选择器和复合选择器，但是基础选择器在实际开发中不能满足快速高效的选择标签

• 目的是为了可以选择更精准的目标元素标签
• 复合选择器是由两个或者多个选择器，通过不同的方式组合而成的

1.1 后代选择器

• 概念
  • 后代选择器又称为包含选择器
• 作用
  • 用来选择元素或者元素组的子孙后代

• 其写法就是外层标签写在前面，内层标签写在后面，通过空格分割

  父级 子级{属性:属性值;属性:属性值;}

• 语法

  .class h3{color:red;font-size:16px;}

• 当标签发生嵌套时，内层标签就成为外层标签的后代。

• 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

1.2 子类选择器

• 概念
  • 每个爹都有一个孩子 孩子有一定的属性
• 作用
  • 子元素选择器只能选择作为某元素子元素的元素
  • 其写法就是把父级标签写在前面，子类标签写在后面，中间用 > 进行连接

    .class>h3{color:red;font-size:14px;}

    总结：
    子类指的是儿子，而不是孙子

1.3 交集选择器

• 条件
  • 交集选择器由两个选择器构成，找到标签必须满足的条件：即标签一的特点，也有标签二的特点 ```css

h1.header{ height: 200px; width: 200px; background-color: salmon; }

- 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，
---
<a name="WsRRj"></a>
## 1.4 并集选择器（重点）
- 如果想多个类同时定义为相同的样式，就可以是使用并集选择器。
- 并集选择器是各个选择器通过`,`逗号隔开连接而成的，通常用于集体声明。
- 语法
```css
div,p,span{
     font-size: 20px;
     color: slateblue;
     font-weight: bold;
 }

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

1.5 链接伪类选择器（重点）

• 伪类选择器
  • 类选择器 .class 单点
  • 伪类选择器 :link() 双点冒号

• 作用

  • 用于在其他选择器上添加特殊的效果，比如链接添加特殊效果，

    a:link      / 未访问的链接 /
    a:visited   / 已访问的链接 /
    a:hover     / 鼠标移动到链接上 /
    a:active    / 选定的链接 /

• 注意

  • 一定要保持固定的顺序 link - visiter - hover - active ，否则可能会引起报错
• 因为叫伪类选择器，所有都是利用交集选择器进行选择，a:link a:hover
• 因为a链接浏览器是具有默认样式，所以在实际开发中需要给链接单独指定样式

1.6 复合选择器总结