选择器的种类

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（第一嵌套层级）

- 实例演示:

```css

.box > span{

background-color:red;

}

<div class="box">

<span>span1是子元素</span>

<p>

<span>span2是子元素的子元素</span>

</p>

</div>

/*只有span1变成了红色*/

```

#### 1.3 相邻选择器

- 语法：

```css

E + F {

样式声明;

}

```

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

- 作用： E元素之后紧跟着的兄弟元素F

- 实例演示:

```css

.box + p{

background-color:red;

}

<p>这个P元素不会被应用样式</p>

<div class="box">box</div>

<p>这个P元素会被应用样式</p>

<p>这个P元素不会被应用样式</p>

```

#### 1.4 交集选择器

- 语法

```css

E.F {

样式声明;

}

```

- 描述：【无连接符】

- 作用：选择同时被所有选择器交集选中的元素

- 实例演示：

```css

p.box{

background-color:red;/*只对div有效*/

}

<p class="box">这个元素会被应用样式</p>

<div class="box">这个元素不会被应用样式</div>

```

#### 1.5 并集选择器

- 语法

```css

E，F {

样式声明;

}

```

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

- 作用： 使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式

```css

/*不使用并集选择器*/

.box{

color:Red;

}

div{

color:red;

}

#test{

color:red;

}

<p class="box">p1</p>

<div>div</div>

<span id="test">span</span>

```

```css

/*使用并集选择器——精简代码*/

.box,div,#test{

color:red;

}

```

#### 1.6 伪类选择器

超链接的四种状态伪类

- 语法：【冒号：】连接

```css

a:link{ css样式 } //链接未被访问

a:visited{ css样式 } //链接被访问过后

a:hover{ css样式 } //链接被鼠标悬停

a:active{ css样式 } //链接被激活（鼠标按下不抬起时）

```

- 总结：

- 注意书写顺序 l-v-h-a

- 实际工作中最常用的是:hover

- 可以与其它选择器结合灵活使用

- 实例演示：

```css

.box a:hover{ color:red; } .box内部的a鼠标滑过时

.abox:hover {color:green;} .abox鼠标滑过时

.abox:hover > span{color:red;} .abox滑过时它内部的直接子元素span

```