CSS 3 所有的选择器整理（2023.2）

你知道的和你不知道的所有选择器。不包含尚未广泛实现的，也不包含已弃用的。

基本的选择器规则（Selector）

类型（Type）选择器

直接用标签匹配特定的元素

span {

	...

}

p {

	...

}

类（Class）选择器

以.开头，匹配含有这个 class 的元素

.info {

	...

}

p.info { /* 匹配含有 info 类的 p 元素 */

	...

}

.info.log { /* 匹配同时含有 info 和 log 类的元素 */

	...

}

ID 选择器

以#开头，匹配对应 id 的元素。

#info {

	...

}

p#info {

	...

}

参数（Attribute）选择器

除了 id 和 class，也可以筛选其他参数进行匹配，并且除了全字匹配还提供了多重手段。

/* 存在 title 的 <a> 元素 */

a[title] 

/* 存在 href 属性并且值为"https://example.org"*/

a[href="https://example.org"] 

/* 存在 href 属性并且内容包含"example"*/

a[href*="example"] 

/* 存在 href 属性并且以".org"结尾 */

a[href$=".org"] 

/* 存在 href 属性并且以"https"开头 */

a[href^="https"] 

/* class 用空格分割的列表中存在 logo。效果等于.logo。用于class这样空格分隔的属性 */

a[class~="logo"] 

/* 存在 lang 属性并且以"zh"或"zh-"开头。用于匹配lang属性*/

div[lang|="zh"]

/* i 表示忽略大小写 */

a[href="https://example.org" i]

通配符

*表示通配符，可以匹配任何元素。性能较低，谨慎使用。

组合选择器（Combinator）

组合选择器可以连接多个元素。

子选择器和后代选择器

子选择器用>表示，匹配第一个元素的直接后代的第二个元素（即 child）。后代选择器只需要用空格隔开，不要求是直接后代（即 descendant）。

p span{ /* 所有 p 元素中的 span 元素 */

	color:red;

}

p > span{ /* 所有 p 元素中的直接子元素 span 元素 */

	color:blue;

}

<p>

	<span>p span和p>span都匹配</span>

	<p>

	  <span>只匹配p span</span>

	</p>

</p>

注意：p.info 和 p .info 是不一样的。

兄弟选择器和相邻兄弟选择器

与上文类似，兄弟选择器用+表示，匹配第一个元素直接相邻之后的第二个元素。相邻兄弟选择器用~表示，只要求是兄弟（同一个父元素），不要求相邻。

img + p /* 紧跟在img后面的p */

img ~ p /* 和img有相同父元素的p */

<p>

	<img/>

	<p>匹配 img+p 和 img~p</p>

	<p>只匹配 img~p</p>

</p>

选择器列表

选择器列表用逗号,表示，用逗号连接的选择器共同使用规则。

span, div{}

span, .info{}

注意：1. p span, .info 会匹配 p span 和 .info，而不是 p span 和 p .info，实现后者需要:is

2. 逗号选择器是阻塞的，如果其中一个标签不合法，整个规则都不会生效

伪类（Pseudo-Classes）

CSS 伪类是添加到选择器的一种关键字，表示这个元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。但这个类并不真的在 class 中，所以叫伪类。伪类用:表示。

链接和按钮相关

常用：

:link表示未访问的链接，匹配尚未访问的链接，默认一般是蓝色。
:visited表示访问过的链接，一般是紫色。出于隐私限制，这个伪类用的越来越少。
:hover表示鼠标移向元素时的情况
:active表示鼠标正在点击元素的情况

.info:link{

	color: blue;

}

.info:hover{

	color: red;

}

.info:active{

	color: purple;

}

<a href="example">a link</a>

注意： 1. 有 href 属性的 a 标签才是链接，没有的不算。:link 也不只有 a 标签，其他标签的链接也可以（比如 link 标签）。

2. LVHA 规则：定义同一个链接多种情况的样式时，要按 link visited hover active 的顺序。这是因为他们的优先级相同，如果后出现的覆盖先出现的就会出现问题，比如将 hover 放到 active 后，那点击链接时两个伪类都满足，hover 会覆盖 active 导致 active 的设置不生效。

:any-link表示未访问的和已访问的链接，包括 link 和 visited。

表单输入相关

:checked表示正选中的单选框（radio），复选框（checkbox）和下拉菜单项（option）元素
:default表示单选框，复选框和下拉菜单项中默认的那个元素
:disabled表示被禁用的元素
:enabled表示被启用的元素
:focus表示获得焦点的元素
:focus-within表示获得焦点或者后代获得焦点的元素
:focus-visible表示获得焦点且焦点可见的元素。这是什么意思呢？

对于一个 input 输入框，无论用鼠标点击它还是用 tab 切到它，样式都是一样的（一般是加上一圈 outline），符合人们的习惯。

但是对于一个 button 来说，用鼠标点击它会触发 :focus ，而用 tab 切换到它也会触发 :focus（虽然没有按下去），这就有点奇怪了。

<button> A </button>

<button> B </button>

<style>

button:focus{ background-color: red;} /* tab 过去也生效 */

/*button:focus-visible{ background-color: green;*/}</style>

我们设定 :focus，显然是给鼠标按下去准备的，却忘了键盘 tab 获得焦点的情况。对于 button，用鼠标点击的时候，你知道自己在点哪，就不算 :focus-visible；而用 tab 切换或者 js 跳转时，你需要不一样的焦点提醒，此时 :focus-visible 生效，这样就可以区分二者。对于输入框来说，所有聚焦都触发 :focus-visible。取消掉注释，两种focus样式就不再相同了。

其实浏览器的默认样式就考虑到了，默认按钮点击时会变深，tab 时则是加上一圈 outline。自己的样式会让默认样式失效，如果需要精细的设计，就可以使用 :focus-visible。一个案例

:in-range表示值在min到max范围内的输入框
:out-of-range表示值不在min到max范围内的输入框
:indeterminate表示“不确定”的表单元素，包括设置了 indeterminate 的选框，尚未选择的单选框，尚未完成的进度条。
:valid表示输入合法的输入框
:invalid表示输入不合法的输入框
:required表示设置必填的输入
:optional表示设置不是必填的输入
:placeholder-shown表示拥有 placeholder 的输入框
:read-only表示设置了只读属性的输入
:read-write表示可修改的输入
:autofill表示按下浏览器自动填充功能的输入框

DOM 子节点相关

:empty表示没有子元素的元素（文本节点也算元素，注释不算）。比如<p>assa</p>并不能匹配，<p></p>才可以。
:first-child表示“是父元素的第一个子节点”。
:last-child表示“是父元素的最后一个子节点”。
:first-of-type表示“是父元素的第一个对应元素的子节点”。
:last-of-type表示“是父元素的最后一个对应元素的子节点”。

<p>

 <span>p :first-child 或者 span:first-child</span>

 <a>p a:first-of-type</a>

 <a></a>

</p>

:nth-child后接整数或一次函数，选中特性序号的孩子节点。

p :nth-child(2) /* 第二个孩子 */

p :nth-child(2n) /* 第2,4,6……个元素，n从0开始 */

p :nth-child(2n+1) /* 第1,3,5……个元素 */

p :nth-child(4n+3) /* 第4,7,10……个元素 */

p :nth-child(-n+3) /* 第3,2,1个元素 */

:nth-last-child同上，不过是倒着数
:nth-of-type同上，也就是:first-child和:first-of-type的区别，限定了元素
:nth-last-of-type同上。
:only-child表示没有其他兄弟的元素
:only-of-type表示没有其他相同元素兄弟的元素

DOM 相关的其他伪类

:has表示“拥有……”的，它的参数是一个逗号选择器列表。注意不能 has 嵌套。Firefox 暂不支持

p:has(span, .info)  /* 含有 span或.info的 p */

h1:has(+h2) /* 满足h1+h2的 h1 */

:is和:where后接选择器列表，表示多选一。他们的区别是 is 计算优先级，而 where 不计入。p :is(span, .info)表示p span 和 p .info
:not后接选择器列表，和 is 相反，表示排除这些选项，选中不是这些元素的元素。
:root在 HTML 文档中，:root 就等于 <html> 元素

其他

:modal表示“模态”，即 js 用 showModal 构造的阻塞对话框的样式。一个案例
:lang用于选中元素的语言属性
:target表示当前锚点代表的元素。比如当前 url 是example.org#title，那么 id 为 title 的元素就会被匹配
:defined表示所有的默认标签（div span）和用 js customElements.define定义的自定标签，有了这个伪类，就可以把自定标签定义之前和之后区分
:host匹配所有 shadow root 的根元素，也可以加上括号，:host()后接选择器，表示符合条件的根元素。
:host-context后接选择器，匹配在 shadow DOM 中符合条件的元素。

伪元素（Pseudo-elements）

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。但这个部分在 dom 中并不存在，所以叫做伪元素。用::表示，但像伪类一样只打一个冒号也可以。

::after在已选中元素之后再构造一个元素
::before在已选中元素之前再构造一个元素
::first-letter匹配本元素第一个字符
::first-line匹配本元素第一个行
::marker匹配一个 list 的元素的 marker，比如列表前面的数字序号和小圆点。
::placeholder匹配输入框的 placeholder 文本
::selection表示元素中被用户框选的部分

其他

::part后接字符串，匹配 shadow tree 中满足part条件的元素
::file-selector-button代表一个文件提交按钮
::cue匹配这个元素的 WebVTT 提示
::slotted匹配模板中的插槽元素
::target-text匹配当前的文本锚点所在的文本。