基本选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
* |
通配选择器 | 选择文档中所有 HTML 元素 |
p |
元素选择器 | 选择文档中所有 p 元素 |
#tab |
ID 选择器 | 选择指定 id = ‘tab’ 的元素 |
.tab |
类选择器 | 选择指定 class = ‘tab’ 的多个元素 |
层次(关系)选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
div a |
后代选择器 | 选择匹配的 div 下的所有后代 a 元素 |
div>a |
直接后代选择器 | 选择匹配的 div 的所有直接后代 a 元素 |
div+a |
相邻兄弟选择器 | 选择匹配与 div 相邻的所有兄弟 a 元素 |
div~a |
随后兄弟选择器 | 选择匹配的 div 后的所有相邻的兄弟 a 元素 |
动态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
a:link |
链接伪类选择器 | 选择匹配的 a 元素被定义了超链接并未被访问过 |
a:visited |
链接伪类选择器 | 选择匹配的 a 元素被定义了超链接并已被访问过 |
a:active |
用户行为选择器 | 选择匹配的 a 元素被激活，常用于链接描点和按钮上 |
div:hover |
用户行为选择器 | 选择匹配用户鼠标停留在元素 div 上 |
input:focus |
用户行为选择器 | 选择匹配的匹配 input 元素获取焦点 |
UI 元素状态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
E:checked |
选中状态伪类选择器 | 匹配选中的复选按钮或者单选按钮表单元素 |
E:enabled |
启用状态伪类选择器 | 匹配所有启用的表单元素 |
E:disabled |
不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
目标伪类选择器
| 选择器 | 功能描述 |
|---|---|
E:target |
用来匹配页面的 URL 中某个标识符的目标元素 例如：URL 标签中通常含有一个 # 后面带有标识符名称，比如 #haha ，目标伪类选择器就是用来匹配 ID 为 haha 的元素 |
属性选择器
| 选择器 | 功能描述 |
|---|---|
[attr] |
该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何 |
[attr=val] |
该选择器仅选择 attr 属性被赋值为 val 的所有元素 |
[attr~=val] |
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为 val |
结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
E:first-child |
选择父元素中的第一个子元素 E ，与 E:nth-child(1) 等同 |
E:last-child |
选择父元素中的最后一个子元素 E ，与 E:nth-last-child(1) 等同 |
E:root |
匹配元素的根元素，在 HTML 中，根元素永远是 html |
E F:nth-child(n) |
选择父元素 E 的第 n 个子元素 F ，其中: n 可以是整数、关键字（even、odd）、可以是公式 （2n+1） ，而且 n 值起始值为 1 |
E F:nth-last-child(n) |
选择父元素 E 的倒数第 n 个子元素 F ，此选择器与 E:nth-child(n) 选择器计算顺序刚好相反 |
E:nth-of-type(n) |
选择父元素内具有指定类型的第 n 个 E 元素 |
E:nth-last-of-type(n) |
选择父元素内具有指定类型的倒数第 n 个 E 元素 |
E:first-of-type |
选择父元素内具有指定类型的第一个 E 元素，与 E:nth-of-type(1) 等同 |
E:last-of-type |
选择父元素内具有指定类型的最后一个 E 元素，与 E:nth-last-of-type(1) 等同 |
E:only-child |
匹配父元素下唯一的子元素 E |
E:only-of-type |
选择父元素只包含一个同类型子元素 E |
E:empty |
选择没有子元素的元素，而且该元素也不包含任何文本节点 |
否定伪类选择器
| 选择器 | 功能描述 |
|---|---|
E:not(F) |
从一组 E 元素中将符合要求的元素 F 剔除出去 |
伪元素选择器
| 选择器 | 功能描述 |
|---|---|
::first-letter |
设置对象内的第一个字符的样式 |
::first-line |
设置对象内的第一行的样式 |
::before |
设置在对象前发生的内容，用来和 content 属性一起使用，并且必须定义 content 属性 |
::after |
设置在对象后发生的内容，用来和 content 属性一起使用，并且必须定义 content 属性 |
::placeholder |
设置对象文字占位符的样式 |
::selection |
设置对象被选择时的样式，::selection 只能定义被选择时的 background-color 、color |
打赏作者
您的打赏是我前进的动力
微信
支付宝
渲染优化
上一篇
评论
