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

妖狐艹你老母 2023-08-17 16:30 73阅读 0赞

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

##### 后代选择器 #####

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

示例：

CSS：

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

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

##### 交集选择器 #####

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

示例：

CSS：

h3.special{ 
    	color: purple;
    }

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

![在这里插入图片描述][20190928231440453.png]  
所以 `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;
    }

![在这里插入图片描述][20190928232451757.png]

##### 伪类选择器 #####

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

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

###### 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>
        
        ![在这里插入图片描述][20190929110119110.gif]
 *  上述的使用方法的顺序切勿打乱否则有的样式不起作用（效果可自行尝试）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230810/9e13441cbdcc4bc7827ce7daa08b89c8.png
[20190928231440453.png]: /images/20230810/3dc70ec97cf64a138f70481cf97ac0d8.png
[20190928232451757.png]: /images/20230810/1fd72c689e434d68ae58f27dc31e093e.png
[20190929110119110.gif]: /images/20230810/b8e4a76d811d44d08f565be2fa32d886.png