[TOC] #### 前言 ---- 本文详细记录 CSS 各种选择器，对选择器进行了分类整理，若有遗漏的选择器后续会更新上 本文仅是对 CSS 所有选择器做一个概括，详细用法不做过多描述，比较重要的类型选择器会另外写文章做详细总结 #### 1. 简单选择器 ---- ##### 通配符选择器 使用 `*` 匹配页面中所有标签，**通配符选择器** 又称为 **全局选择器** ```css * {} ``` ##### 标签选择器 **标签选择器** 又称为 **元素选择器**、**类型选择器**、**html 选择器** ```css div {} span {} ``` ##### 类选择器 用于找到所有该类名的标签，class 值可以重复 ```css .box {} ``` ##### id选择器 找到拥有该 id 值的标签，同一个页面中 id 值不能重复 ```css #box {} ``` ##### 群组选择器 **群组选择器** 又称为 **分组选择器**，用于选中多个选择器，优化冗余的 CSS 样式代码 ``` 选择器1,选择器2 {} ``` ##### 后代选择器 **后代选择器** 又称为 **派生选择器**，找到指定标签的所有后代标签 ```css 选择器1 选择器2 {} ``` ##### 子代选择器 子代选择器用于找到指定标签的所有直接子元素标签 ```css 选择器1 > 选择器2 {} ``` ##### 交集选择器 交集选择器是指标签选择器和 id 或 class 选择器配合使用。 并集选择器的作用: 提高选择器的权重，更加精准的选择指定标签 ``` 标签名.class值 {} 标签名.id值 {} ``` #### 2. 兄弟选择器 --- ##### 相邻兄弟选择器 相邻兄弟选择器用于选中紧跟着的一个兄弟 特别注意: 字符实体不是标签，不影响相邻关系 ``` 选择器1 + 选择器2 {} ``` ##### 通用兄弟选择器 **通用兄弟选择器** 又称为 **一般兄弟选择器**，用于选中后面所有兄弟 ``` 选择器1 ~ 选择器2 {} ``` 可使用下面代码测试相邻兄弟选择器与通用兄弟选择器的区别 ```html <style> /* 相邻兄弟选择器 */ p+p { color: red; font-size: 25px; font-weight: bold; } /* 通用兄弟选择器 */ p~p { color: red; font-size: 25px; font-weight: bold; } </style> <main> <p>1</p> <p>2</p> <span>3</span> <p>4</p> <p>5</p> <span>6</span> </main> ``` #### 3. 属性选择器 ---- ##### 属性名选择器 以属性名匹配元素，属性名不能用引号引起来 ```css /* 格式 */ [属性名] {} /* 示例: 选中具有 type 属性的标签 */ [type] {} ``` ##### 属性值选择器 选中具有指定属性名和值的元素，属性值可以不用引号引起来，但是如果属性值是以数字开头时则必须使用引号 语法格式: ```css [attr=value] {} [attr="value"] {} ``` ##### 属性值开头选择器 属性值开头匹配选择器: attr 的值以 value 开头 ```html <style> [class^="box"] { color: red; } </style> <div class="box1">1</div> <div class="box2">2</div> <div>3</div> ``` ##### 属性值结尾选择器 属性值结尾匹配选择器: attr 的值以 value 结尾 ```css [attr$="value"] {} ``` ##### 属性值模糊匹配选择器 **属性值模糊匹配选择器** 又称为 **税性质模糊匹配选择器**，匹配 attr 属性值包含 value 的元素 ```css [attr*="value"] {} ``` ##### 单个属性值匹配选择器 用于匹配多属性中的单个属性值，只有一个属性值也能匹配到: attr 包含独立的单词 value, 必须用空格分开 ```css [attr~="value"] {} ``` 使用示例: ```html <style> [class~="box"] { color: red; } </style> <div class="box">1</div> <div class="box item1">2</div> ``` ##### 分割属性值匹配选择器 匹配满足下面条件的元素: attr 的值以 value 开头，必须用 `-` 分开单词,比如 `value-*` ```css [attr|="value"] {} ``` 使用示例: ```html <style> [class|="box"] { color: red; } </style> <div class="box-abc">1</div> <div class="box-item1">2</div> ``` ##### 标签属性选择器 标签选择器和属性选择器的结合用法 ``` 标签名[属性选择器] {} ``` 使用示例 ```css input[name] {} span[class|="box"] {} ``` #### 4. 伪类选择器 ---- ##### 静态链接伪类 静态链接伪类有: link（未访问的状态）、visited（访问后的状态），是超链接特有的伪类。开发中用的比较少 ```css a:link { color: red; } a:visited { color: blue; } ``` ##### 动态链接伪类 动态链接伪类: focus（获取焦点）、hover（鼠标滑过）、active（鼠标激活，链接被按下） active 必须写在 hover 的后面，否则 active 会失效 超链接如果有多个选择器，需按照上面的顺序设定，否则会有 css 样式无法加载（与选择器的优先级有关） ```css div:hover { background: lightcoral; } input:focus { background: lightcoral; } a:active { font-weight: bold; color: blueviolet; } ``` ##### 目标链接伪类 目标链接伪类: target，是 CSS 3 中新增的。突出显示被激活的锚点元素，也就是给被激活的锚点设置样式 ```css div:target { font-size: 35px; } ``` ##### UI 元素状态伪类 **UI 元素状态伪类选择器** 用于 **表单元素** | 选择器 | 描述 | | ------------ | ------------ | | :enabled | 匹配界面中已启用的元素，表单元素默认就是启用 | | :disabled | 匹配界面中被禁用的元素，已启用的对立面 | | :checked | 匹配被选中的元素，只用于单选框和复选框 | ##### 结构伪类选择器 ###### child 系列 (css2) | 选择器 | 描述 | | ------------ | ------------ | | :first-child | 父元素结构上的第一个子元素 | | :last-child | 父元素结构上的最后一个子元素 | | :nth-child(n) | 父元素结构上的第 n 个子元素 | | :nth-child(-n + 3) | 父元素结构上的前 3 个子元素 | | :nth-child(n + 5) | 从第 5 个开始的子元素 | | :nth-child(2n + 5) | 间隔选择，从第 5 个开始，每隔两个 | | :nth-last-child(n) | 父元素结构上的倒数第 n 个字元素 | | :only-child | 父元素只有一个子元素 | ###### of-type 系列 (css3) | 选择器 | 描述 | | ------------ | ------------ | | :first-of-type | 父元素的第一个该类型的子元素 | | :last-of-type | 父元素的最后一个该类型的子元素 | | :nth-of-type(n) | 父元素的第 n 个该类型的子元素 | | :nth-last-of-type(n) | 父元素结构上的倒数第 n 个该类型的子元素 | child 系列和 of-type 系列中 n 的取值 1\. 非零的正整数: 1、2、3 2\. 英文单词: odd(奇数)、even(偶数) 3\. 公式 `an + b`: a 倍数 n 计数器，从 0 开始的整数，b 偏移量 选中第 1、4、7、10、... 个元素 ``` div:nth-child(3n+1) {} ``` ###### empty 空元素选择器 匹配没有子元素的元素，空元素: 标签中没有内容的元素 ```css div:empty {} ``` ##### 否定伪类选择器 否定伪类用法: `not(选择器) {}` 将指定选择器排除在外，圆括号中的选择器只能是简单选择器 ``` div:not(.box) {} ```