神器的选择器
基础选择器
| 选择器 | 别名 | 说明 | 版本 | 常用 |
|---|---|---|---|---|
tag |
标签选择器 | 指定类型的标签
|
1 | √ |
#id |
ID选择器 | 指定身份的标签
|
1 | √ |
.class |
类选择器 | 指定类名的标签
|
1 | √ |
* |
通配选择器 | 所有类型的标签
|
2 | √ |
层次选择器
| 选择器 | 别名 | 说明 | 版本 | 常用 |
|---|---|---|---|---|
elemP elemC |
后代选择器 |
元素的后代元素
|
1 | √ |
elemP>elemC |
子代选择器 |
元素的子代元素
|
2 | √ |
elem1+elem2 |
相邻同胞选择器 |
元素相邻的同胞元素
|
2 | √ |
elem1~elem2 |
通用同胞选择器 |
元素后面的同胞元素
|
3 | √ |
集合选择器
| 选择器 | 别名 | 说明 | 版本 | 常用 |
|---|---|---|---|---|
elem1,elem2 |
并集选择器 |
多个指定的元素
|
1 | √ |
elem.class |
交集选择器 |
指定类名的元素
|
1 | √ |
条件选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
:lang |
指定标记语言的元素
|
2 | × |
:dir() |
指定编写方向的元素
|
4 | × |
:has |
包含指定元素的元素
|
4 | × |
:is |
指定条件的元素
|
4 | × |
:not |
非指定条件的元素
|
4 | √ |
:where |
指定条件的元素
|
4 | × |
:scope |
指定元素作为参考点 |
4 | × |
:any-link |
所有包含href的链接元素
|
4 | × |
:local-link |
所有包含href且属于绝对地址的链接元素
|
4 | × |
状态选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
:active |
鼠标激活的元素
|
1 | × |
:hover |
鼠标悬浮的元素
|
1 | √ |
:link |
未访问的链接元素
|
1 | × |
:visited |
已访问的链接元素
|
1 | × |
:target |
当前锚点的元素
|
3 | × |
:focus |
输入聚焦的表单元素
|
2 | √ |
:required |
输入必填的表单元素
|
3 | √ |
:valid |
输入合法的表单元素
|
3 | √ |
:invalid |
输入非法的表单元素
|
3 | √ |
:in-range |
输入范围以内的表单元素
|
3 | × |
:out-of-range |
输入范围以外的表单元素
|
3 | × |
:checked |
选项选中的表单元素
|
3 | √ |
:optional |
选项可选的表单元素
|
3 | × |
:enabled |
事件启用的表单元素
|
3 | × |
:disabled |
事件禁用的表单元素
|
3 | √ |
:read-only |
只读的表单元素
|
3 | × |
:read-write |
可读可写的表单元素
|
3 | × |
:target-within |
内部锚点元素处于激活状态的元素
|
4 | × |
:focus-within |
内部表单元素处于聚焦状态的元素
|
4 | √ |
:focus-visible |
输入聚焦的表单元素
|
4 | × |
:blank |
输入为空的表单元素
|
4 | × |
:user-invalid |
输入合法的表单元素
|
4 | × |
:indeterminate |
选项未定的表单元素
|
4 | × |
:placeholder-shown |
占位显示的表单元素
|
4 | √ |
:current() |
浏览中的元素
|
4 | × |
:past() |
已浏览的元素
|
4 | × |
:future() |
未浏览的元素
|
4 | × |
:playing |
开始播放的媒体元素
|
4 | × |
:paused |
暂停播放的媒体元素
|
4 | × |
结构选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
:root |
文档的根元素
|
3 | × |
:empty |
无子元素的元素
|
3 | √ |
:nth-child(n) |
元素中指定顺序索引的元素
|
3 | √ |
:nth-last-child(n) |
元素中指定逆序索引的元素
|
3 | × |
:first-child |
元素中为首的元素
|
2 | √ |
:last-child |
元素中为尾的元素
|
3 | √ |
:only-child |
父元素仅有该元素的元素
|
3 | √ |
:nth-of-type(n) |
标签中指定顺序索引的标签
|
3 | √ |
:nth-last-of-type(n) |
标签中指定逆序索引的标签
|
3 | × |
:first-of-type |
标签中为首的标签
|
3 | √ |
:last-of-type |
标签中为尾标签
|
3 | √ |
:only-of-type |
父元素仅有该标签的标签
|
3 | √ |
属性选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
[attr] |
指定属性的元素
|
2 | √ |
[attr=val] |
属性等于指定值的元素
|
2 | √ |
[attr*=val] |
属性包含指定值的元素
|
3 | √ |
[attr^=val] |
属性以指定值开头的元素
|
3 | √ |
[attr$=val] |
属性以指定值结尾的元素
|
3 | √ |
[attr~=val] |
属性包含指定值(完整单词)的元素(不推荐使用) |
2 | × |
[attr|=val] |
属性以指定值(完整单词)开头的元素(不推荐使用) |
2 | × |
伪元素
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
::before |
在元素前插入的内容
|
2 | √ |
::after |
在元素后插入的内容
|
2 | √ |
::first-letter |
元素的首字母
|
1 | × |
::first-line |
元素的首行
|
1 | × |
::selection |
鼠标选中的元素
|
3 | × |
::backdrop |
全屏模式的元素
|
4 | × |
::placeholder |
表单元素的占位
|
4 | √ |
选择器真正的用处不仅仅是说明选项里的描述，更多是搭配起来能起到的最大作用。这些选择器组成的「选择器系统」是整个CSS体系里的核心，使用选择器能带来以下好处。
-
「清晰易读」：对于那些结构与行为分离的写法，使用
sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性 - 「确保一致」：减少修改类而有可能导致样式失效的问题，有时修改类但未确保HTML和CSS的一致而导致样式失效
- 「剔除累赘」：减少无实质性使用的类，例如很多层嵌套的标签，这些标签可能只使用到一个属性，就没必要新建类关联
- 「高效流畅」：使用选择器可实现一些看似只能由JS才能实现的效果，既减少代码量也减少JS对DOM的操作，使得交互效果更流畅
网友评论