CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解-蒲公英云

CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解

常见的高级选择器有后代选择器、交集选择器、并集选择器

后代选择器

选择器之间用空格隔开就是后代选择器
选择的是后代元素，不一定是儿子元素，后代选择器描述的是祖先结构
使用规则：外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子

示例：

<div class="box">
    <ul>
        <li>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <div>
                <p>段落</p>
            </div>
        </li>
    </ul>
</div>

CSS：

.box p{ 
    color: green;
    /* 设置边框 */
    border: 1px dashed red;
}

class 属性值为 .box 的标签中的所有 p 标签都会被选中
在这里插入图片描述

交集选择器

交集选择器一般由两个选择器构成，既有选择器一的特点，也有选择器二的特点
交集选择器没有空格
交集选择器一般都是以标签名开头，比如 div.box、p.special
交集选择器可以连续交（一般不要这么写）

示例：

<h3 class="special">h3 标签</h3>
<p class="special">p 标签</p>
<p>
    <span class="special">span 标签</span>
</p>

CSS：

h3.special{ 
    color: purple;
}

选择的元素同时满足两个条件：必须是 h3 标签，然后必须是 class 名为 special 的标签

在这里插入图片描述
所以 div.red{} 和 div .red{} 不是一个意思

并集选择器

并集选择器是各个选择器通过 , 连接而成的，通常用于集体声明
给多个元素加同一个样式，多个选择器之间用逗号隔开即可

示例：

<div>这是div标签</div>
<h1>这是h1标签</h1>
<p>这是p标签</p>
<p class="p1">这是p标签</p>
<span>这是span标签</span>

CSS:

h1,.p1,span{ 
    /*设置字体颜色为天蓝色*/
    color:skyblue;
}

在这里插入图片描述

伪类选择器

同一个标签，根据用户的某种状态不同，有不同的样式；这就叫做“伪类”

伪类用 “:” 英文冒号来表示

CSS伪类选择器：一般是给超链接加的样式

正常状态
- :link (连接)鼠标点击链接之前的样式
放上状态
- :hover (徘徊)鼠标放到链接上时的样式
激活状态
- :active (有效的)按住鼠标左键不松开的样式，这个状态特殊短暂
访问过的状态
- :visited (已访问)按下鼠标左键，并弹起，之后的样式效果
使用方法（示例）
- 将”正常状态”和”访问过的状态”合二为一；也可以省略不写，直接用 a 标签：a { 这里写样式 }
```
a:link, a:visited { 
  color: red;
  text-decoration: none;
}
```
- “鼠标放上” 单做一种效果
```
a:hover{ 
  color: green;
  text-decoration: underline;
}
```
- 激活状态，时间短暂一般不设样式
```
a:active { 
  color: yellow;
  text-decoration: none;
}
```
  主要 HTML 代码
```
<a href="http://www.baidu.com">超链接</a>
```
上述的使用方法的顺序切勿打乱否则有的样式不起作用（效果可自行尝试）