学习《CSS选择器Level-4》不完全版
选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范，概括总结了Level1-Level4中绝大多数的选择器，并做了简单的语法说明及示例演示。希望对程序员有所助益。
2 元素选择器2.1 类型选择器-h2类型选择器也可以称为标签名选择器，会选中文档中该类型元素的实例。
h2 { color: red;}
将文档中元素类型为h2的颜色设置成红色。
查看示例程序
2.2 通配选择器-*通用选择器是一种特殊类型选择器，表示任何元素类型的元素。
* { color: red;}
设置文档中所有元素的颜色为红色。
3 属性选择器3.1 属性存在选择器-[name]h2[name] { color: red;}
选中元素 h2 中具有属性 name 的元素。
查看示例程序
3.2 属性值选择器3.2.1 确切匹配-[title='cool']h2[title='cool'] { color: red;}
匹配元素 h2 中包含属性 title 并且属性值是 cool 的元素。
查看示例程序
3.2.2 包含匹配-[title|='cool']h2[title~='cool'] { color: red;}
匹配元素 h2 中包含属性 title 并且属性值中包含 cool 的元素。
查看示例程序
3.2.3 头部匹配-[title^='cool']h2[title|='cool'] { color: red;}
匹配元素 h2 中包含属性 title ，并且属性值是 cool 的元素 或以 cool- 开头的元素。
查看示例程序
3.3 属性值子串选择器3.3.1 头部匹配-[title^='cool']h2[title^='cool'] { color: red; }
匹配元素 h2 中包含属性 title ，并且属性值串以 cool 开头的元素。
查看示例程序
3.3.2 尾部匹配-[title$='cool']h2[title$='cool'] { color: red; }
匹配元素 h2 中包含属性 title ，并且属性值串以 cool 结尾的元素。
查看示例程序
3.3.3 部分匹配-[title*='cool']h2[title*='cool'] { color: red; }
匹配元素 h2 中包含属性 title ，并且属性值串包含 cool 子串的元素。
查看示例程序
3.4 类选择器-.class.red { color: red; }
匹配文档中 class 属性为 red 的元素并设置其颜色为红色。
查看示例程序
3.5 ID选择器-#id#title { color: red; }
匹配文档中 id 属性为 title 的元素并设置其颜色为红色。
查看示例程序
4 语言学伪类4.1 方向性伪类:dirdir() 主要用于匹配符合某个方向性的元素，例如 :dir(ltr) 和 :dir(rtl)，其中ltr是left to right简写，表示从左向右，而rtl是right to left，表示从右向左。
:dir(ltr) { color: red;}
匹配文字方向为从左到右的元素。
查看示例程序
4.2 语言伪类:lang:lang(fr) { color: red;}
匹配语言为法语的元素并设置其颜色为红色。
查看示例程序
5 位置伪类5.1 超链接伪类:any-link匹配带有 href 属性的 <a>、<link>、<area>等元素。
:any-link { color: red;}
匹配任意超链接，并设置其颜色为红色。
查看示例程序
5.2 超链接伪类:link:link { color: red;}
匹配未被访问的超链接，并设置其颜色为红色。
5.3 超链接伪类:visited:visited { color: blue;}
匹配访问过的超链接，并设置其颜色为蓝色。
查看示例程序
5.4 超链接伪类:local-link:local-link { color: red;}
匹配本地超链接，并设置其颜色为红色。
5.5 目标伪类:target<h2><a href="#content">三十课</a></h2><p id="content">程序员的笔记本</p><p id="content2">程序员的笔记本2</p>
:target { color: red;}
点击 html 代码中的内部链接，链接的目标对象 id 为 content 的 p元素颜色变为红色。
用户指针设备悬停于指定元素时，匹配该元素。
:hover { color: red;}
用户指针悬停于某元素，匹配该元素并将其设置其颜色为红色。
查看示例程序
6.2 用户行为伪类:active:active { background: red;}
当特定元素处于激活状态时，设置元素背景色为红色。
查看示例程序
6.3 用户行为伪类:focus:focus { background: red;}
当特定元素获得焦点，设置元素背景色为红色。
查看示例程序
6.4 用户行为伪类:focus-withindiv:focus-within { border : 1px solid blue;}
当div中的子元素获得输入焦点时，设置div元素边框为1象素值的蓝色边框。
查看示例程序
7 时间轴伪类7.1 时间伪类:current在文档的语音渲染或是显示字幕期间，常会用到时间轴伪类。
:current(p) { color: red;}
以上规则定义了当前语音渲染段落的颜色为红色。
7.2 时间伪类:past:past(p) { color: red;}
以上规则定义了以完成语音渲染段落的颜色为蓝色。
7.3 时间伪类:future:future(p) { color: yellow;}
以上规则定义了以未进行语音渲染段落的颜色为×××。
8 资源状态伪类8.1 资源状态伪类:playing:playing { border : 1px solid red;}
匹配当前播放状态的元素，并为其添加1象素的红色边框。
8.2 资源状态伪类:paused:playing { border : 1px solid grey;}
匹配当前播放状态的元素，并为其添加1象素的灰色边框。
9 输入伪类9.1 输入状态控制伪类:enabled:enabled { color: red;}
匹配启用状态的元素并设置其颜色为红色。
9.2 输入状态控制伪类:disabled:disabled{ color: yellow;}
匹配禁用状态的元素并设置其颜色为×××。
查看示例程序
9.3 只读伪类:read-only:read-only { color: red;}
匹配只读状态的元素并设置其颜色为红色。
9.4 读写伪类:read-write:read-write { color: yellow;}
匹配读写状态的元素并设置其颜色为×××。
查看示例程序
9.5 伪类:placeholder-shown:placeholder-shown { background: red;}
选中占位符为显示状态的元素并设置其背景色为红色。
查看示例程序
9.6 缺省项伪类:default:default { color: red;}
匹配缺省的元素并设置其颜色为红色。
查看示例程序
9.7 选中项伪类:checked:checked { height: 4em;}
匹配选中的元素并将其高度设成 4em。
查看示例程序
9.8 不确定值伪类:indeterminate不确定值伪类 :indeterminate 适用于其值处在不确定状态的元素。例如 ： radio 元素组在未被初始选择的情况下就为不确定值状态。
:indeterminate { height: 4em;}
匹配不确定值元素并设置高度为 4em。
查看示例程序
9.9 空值伪类:blank空值伪类 :blank 用来匹配输入值为空的输入框，如 textarea 或 input 框。
:blank { background: red;}
目前该伪类兼容性较差。
9.10 合规性验证伪类:valid:valid { color: red; }
匹配输入值合法的元素并设置其颜色为红色。
9.11 合规性验证伪类:invalid:valid { color: blue; }
匹配输入值不合法的元素并设置其颜色为蓝色。
查看示例程序
9.12 范围伪类:in-range:in-range { color: red; }
匹配输入值在定义范围内的元素并设置其颜色为红色。
9.13 范围伪类:out-of-range:out-of-range { color: blue; }
匹配输入值不在定义范围内的元素并设置其颜色为蓝色。
查看示例程序
9.14 必填项伪类:required:required { color: red; }
匹配定义为必填项的元素并设置其颜色为红色。
9.15 选填项伪类:optional:optional { color: blue; }
匹配定义为选填项的元素并设置其颜色为蓝色。
查看示例程序
10 树形结构伪类10.1 根结点伪类:root伪类 :root 表示文档的根元素。例如，在DOM文档中，伪类 :root 与Document对象的根元素匹配。 在HTML中，就表示html元素。
:root { color: red;}
匹配文档根元素并定义其颜色为红色。
查看示例程序
10.2 空伪类:empty:empty { color : red;}
匹配为空的元素并设置其颜色为红色。
查看示例程序
10.3 元素索引伪类:nth-childp:nth-child(3n+1) { color: red;}
匹配第1，4，7，10等 p 元素并设置其颜色为红色。
查看示例程序
10.4 元素索引伪类:nth-last-childp:nth-child(3n+1) { color: red;}
匹配倒数第1，4，7，10等 p 元素并设置其颜色为红色。
查看示例程序
10.5 首元素伪类:first-childp:first-child { color: red; }
匹配第一个 p 元素并设置其颜色为红色。
查看示例程序
10.6 尾元素伪类:last-childp:last-child { color: red; }
匹配最后一个 p 元素并设置其颜色为红色。
查看示例程序
10.7 唯一子元素伪类:only-childp:only-child { color: red; }
匹配父元素只包含唯一子元素的元素 p 并设置其颜色为红色。
查看示例程序
10.8 类型索引伪类:nth-of-typep:nth-of-type(3n+1) { color: red; }
匹配类型为 p 的第1，4，7，10等索引位置的元素并设置其颜色为红色。
查看示例程序
10.9 类型索引伪类:nth-last-of-typep:nth-last-of-type(3n+1) { color: red; }
匹配类型为 p 的倒数第1，4，7，10等索引位置的元素并设置其颜色为红色。
查看示例程序
10.10 类型首元素伪类:first-of-typep:first-of-type { color: red; }
匹配第一个类型为 p 的元素并设置及颜色为红色。
查看示例程序
10.11 类型尾元素伪类:last-of-typep:last-of-type { color: red; }
匹配倒数第一个类型为 p 的元素并设置及颜色为红色。
查看示例程序
10.12 唯一类型元素伪类:only-of-typep:only-of-type { color: red; }
匹配父元素只包含唯一类型为 p 子元素并设置其颜色为红色。
查看示例程序
11 逻辑组合选择器11.1 分组选择器h2 { color: red }h3 { color: red }h4 { color: red }h5 { color: red }
利用分组选则器，可以将上述CSS规则简写成下面的形式。
h2,h3,h4,h5 { color: red }
上述两种写法效果相同。
11.2 逻辑组合伪类:is伪类 :is() 是一个以多个选择器做为参数的函数，匹配由其参数表示的元素。
目前兼容性较差。
*:is(:hover, :focus) { color: red;}
匹配伪类 hover 和 focus 的元素并设置其颜色为红色。
负向逻辑组合伪类 :not() 是一个以多个选择器做为参数的函数，匹配不在其参数表中的元素。
目前兼容性较差。
button:not([DISABLED]) { color : red;}
匹配不包含 DISABLED 属性的 button 元素并设置其颜色为红色。
目前兼容性较差。
a:has(> img) { border : 1px solid red;}
匹配包含 img 子元素的超链接并设置其边框为1象素红色。
h2 em { color: red;}
匹配 h2 的后代的 em 元素并设置其颜色为红色。
查看示例程序
12.2 子元素选择器->h2 > em { color: red;}
匹配 h2 的子元素 em 并设置其颜色为红色。
查看示例程序
12.3 相邻兄弟选择器-+h2 + h3 { color: red;}
匹配 h2 的相邻兄弟元素 h3 并设置其颜色为红色。
查看示例程序
12.4 兄弟选择器-~h2 ~ h3 { color: red;}
匹配 h2 的后面的同级结点 h3 并设置其颜色为红色。
查看示例程序
13 结尾13.1 参考文献W3C Working Draft : Selectors Level 4 - 21 November 2018
W3scool : CSS 选择器参考手册
菜鸟教程 ：CSS 选择器
MDN : CSS Selectors
13.2 结语本文是@毛瑞依据CSS选择器规范4择取的部分CSS选择器内容编写而成。因本人水平有限，理解和翻译时难免有偏差和错误，还请程序员朋友多多指正！
文中一些选择器兼容性还很差，只能做为学习储备，不适用于实际产品中运用。
费力原创十分不易，请大家转载时一定要明确注明出处来自【三十课】！
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
