摘要：查看示例程序通配选择器通用选择器是一种特殊类型选择器，表示任何元素类型的元素。例如元素组在未被初始选择的情况下就为不确定值状态。组合选择器后代选择器匹配的后代的元素并设置其颜色为红色。

选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范，概括总结了Level1-Level4中绝大多数的选择器，并做了简单的语法说明及示例演示。希望对程序员有所助益。

类型选择器也可以称为标签名选择器，会选中文档中该类型元素的实例。

h1 {
    color: red;
}

将文档中元素类型为h1的颜色设置成红色。

查看示例程序

通用选择器是一种特殊类型选择器，表示任何元素类型的元素。

* {
    color: red;
}

设置文档中所有元素的颜色为红色。

h1[name] {
    color: red;
}

选中元素 h1 中具有属性 name 的元素。

查看示例程序

h1[title="cool"] {
    color: red;
}

匹配元素 h1 中包含属性 title 并且属性值是 cool 的元素。

查看示例程序

h1[title~="cool"] {
    color: red;
}

匹配元素 h1 中包含属性 title 并且属性值中包含 cool 的元素。

查看示例程序

h1[title|="cool"] {
    color: red;
}

匹配元素 h1 中包含属性 title ，并且属性值是 cool 的元素 或以 cool- 开头的元素。

查看示例程序

h1[title^="cool"] {
    color: red;    
}

匹配元素 h1 中包含属性 title ，并且属性值串以 cool 开头的元素。

查看示例程序

h1[title$="cool"] {
    color: red;    
}

匹配元素 h1 中包含属性 title ，并且属性值串以 cool 结尾的元素。

查看示例程序

h1[title*="cool"] {
    color: red;    
}

匹配元素 h1 中包含属性 title ，并且属性值串包含 cool 子串的元素。

查看示例程序

.red {      
    color: red;       
}

匹配文档中 class 属性为 red 的元素并设置其颜色为红色。

查看示例程序

#title {      
    color: red;       
}

匹配文档中 id 属性为 title 的元素并设置其颜色为红色。

查看示例程序

dir() 主要用于匹配符合某个方向性的元素，例如 :dir(ltr) 和 :dir(rtl)，其中ltr是left to right简写，表示从左向右，而rtl是right to left，表示从右向左。

:dir(ltr) {
    color: red;
}

匹配文字方向为从左到右的元素。

查看示例程序

:lang(fr) {
    color: red;
}

匹配语言为法语的元素并设置其颜色为红色。

查看示例程序

匹配带有 href 属性的 、、等元素。

:any-link {
    color: red;
}

:link {
    color: red;
}

:visited {
    color: blue;
}

:local-link {
    color: red;
}

三十课
程序员的笔记本
程序员的笔记本2

:target {
    color: red;
}

点击 html 代码中的内部链接，链接的目标对象 id 为 content 的 p元素颜色变为红色。

用户指针设备悬停于指定元素时，匹配该元素。

:hover {
    color: red;
}

用户指针悬停于某元素，匹配该元素并将其设置其颜色为红色。

查看示例程序

:active {
    background: red;
}

当特定元素处于激活状态时，设置元素背景色为红色。

查看示例程序

:focus {
    background: red;
}

当特定元素获得焦点，设置元素背景色为红色。

查看示例程序

div:focus-within {        
    border : 1px solid blue;
}

当div中的子元素获得输入焦点时，设置div元素边框为1象素值的蓝色边框。

查看示例程序

在文档的语音渲染或是显示字幕期间，常会用到时间轴伪类。

:current(p) {
    color: red;
}

以上规则定义了当前语音渲染段落的颜色为红色。

:past(p) {
    color: red;
}

以上规则定义了以完成语音渲染段落的颜色为蓝色。

:future(p) {
    color: yellow;
}

以上规则定义了以未进行语音渲染段落的颜色为黄色。

:playing {
    border : 1px solid red;
}

匹配当前播放状态的元素，并为其添加1象素的红色边框。

:playing {
    border : 1px solid grey;
}

匹配当前播放状态的元素，并为其添加1象素的灰色边框。

:enabled {
    color: red;
}

匹配启用状态的元素并设置其颜色为红色。

:disabled{
    color: yellow;
}

匹配禁用状态的元素并设置其颜色为黄色。

查看示例程序

:read-only {
    color: red;
}

匹配只读状态的元素并设置其颜色为红色。

:read-write {
    color: yellow;
}

匹配读写状态的元素并设置其颜色为黄色。

查看示例程序

:placeholder-shown {
    background: red;
}

选中占位符为显示状态的元素并设置其背景色为红色。

查看示例程序

:default {
    color: red;
}

匹配缺省的元素并设置其颜色为红色。

查看示例程序

:checked {
   height: 4em;
}

匹配选中的元素并将其高度设成 4em。

查看示例程序

不确定值伪类 :indeterminate 适用于其值处在不确定状态的元素。例如 ： radio 元素组在未被初始选择的情况下就为不确定值状态。

:indeterminate {
  height: 4em;
}

匹配不确定值元素并设置高度为 4em。

查看示例程序

空值伪类 :blank 用来匹配输入值为空的输入框，如 textarea 或 input 框。

:blank {
    background: red;
}

目前该伪类兼容性较差。

:valid {        
    color: red;       
}

匹配输入值合法的元素并设置其颜色为红色。

:valid {        
    color:  blue;       
}

匹配输入值不合法的元素并设置其颜色为蓝色。

查看示例程序

:in-range {
   color: red;        
}

匹配输入值在定义范围内的元素并设置其颜色为红色。

:out-of-range {
   color: blue;        
}

匹配输入值不在定义范围内的元素并设置其颜色为蓝色。

查看示例程序

:required {            
    color: red;        
}

匹配定义为必填项的元素并设置其颜色为红色。

:optional {            
    color: blue;        
}

匹配定义为选填项的元素并设置其颜色为蓝色。

查看示例程序

伪类 :root 表示文档的根元素。例如，在DOM文档中，伪类 :root 与Document对象的根元素匹配。 在HTML中，就表示html元素。

:root {
    color: red;
}

匹配文档根元素并定义其颜色为红色。

查看示例程序

:empty {           
    color : red;
}

匹配为空的元素并设置其颜色为红色。

查看示例程序

p:nth-child(3n+1) {
    color: red;
}

匹配第1，4，7，10等 p 元素并设置其颜色为红色。

查看示例程序

p:nth-child(3n+1) {
    color: red;
}

匹配倒数第1，4，7，10等 p 元素并设置其颜色为红色。

查看示例程序

p:first-child { 
    color: red;      
}

匹配第一个 p 元素并设置其颜色为红色。

查看示例程序

p:last-child { 
    color: red;      
}

匹配最后一个 p 元素并设置其颜色为红色。

查看示例程序

p:only-child { 
    color: red;      
}

匹配父元素只包含唯一子元素的元素 p 并设置其颜色为红色。

查看示例程序

p:nth-of-type(3n+1) {        
    color: red;      
}

匹配类型为 p 的第1，4，7，10等索引位置的元素并设置其颜色为红色。

查看示例程序

p:nth-last-of-type(3n+1) {        
    color: red;      
}

匹配类型为 p 的倒数第1，4，7，10等索引位置的元素并设置其颜色为红色。

查看示例程序

p:first-of-type {        
    color: red;      
}

匹配第一个类型为 p 的元素并设置及颜色为红色。

查看示例程序

p:last-of-type {        
    color: red;      
}

匹配倒数第一个类型为 p 的元素并设置及颜色为红色。

查看示例程序

p:only-of-type {        
    color: red;      
}

匹配父元素只包含唯一类型为 p 子元素并设置其颜色为红色。

查看示例程序

h1 {  color: red }
h2 {  color: red }
h3 {  color: red }
h4 {  color: red }

利用分组选则器，可以将上述CSS规则简写成下面的形式。

h1,h2,h3,h4 {  
    color: red 
}

上述两种写法效果相同。

伪类 :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象素红色。

h1 em {
    color: red;
}

匹配 h1 的后代的 em 元素并设置其颜色为红色。

查看示例程序

h1 > em {  
    color: red;
}

匹配 h1 的子元素 em 并设置其颜色为红色。

查看示例程序

h1 + h2 {
    color: red;
}

匹配 h1 的相邻兄弟元素 h2 并设置其颜色为红色。

查看示例程序

h1 ~ h2 {
    color: red;
}

匹配 h1 的后面的同级结点 h2 并设置其颜色为红色。

查看示例程序

W3C Working Draft : Selectors Level 4 - 21 November 2018

W3scool : CSS 选择器参考手册

菜鸟教程 ：CSS 选择器

MDN : CSS Selectors

本文是@毛瑞依据CSS选择器规范4择取的部分CSS选择器内容编写而成。因本人水平有限，理解和翻译时难免有偏差和错误，还请程序员朋友多多指正！

文中一些选择器兼容性还很差，只能做为学习储备，不适用于实际产品中运用。

费力原创十分不易，请大家转载时一定要明确注明出处来自【三十课】！