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）和用 jscustomElements.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匹配当前的文本锚点所在的文本。
