深色模式
CSS 选择器
选择器列表
用逗号,将多个选择器组成列表，那么该CSS规则会应用到列表中的每一个选择器上。
🌰：
css
h1, .title {
color: black;
}基础选择器
元素选择器（标签选择器）
css
h1 { }类选择器
css
.box { }ID 选择器
css
#unique { }通配选择器
css
* { }属性选择器
[attr]：匹配属性名
表示带有以 attr 命名的属性的元素。
🌰：
css
a[href] { }可以匹配：
html
<a href="https://example.org"></a>
<a href=""></a>[attr=value]：匹配值
表示带有以 attr 命名的属性，且属性值为 value 的元素。
🌰：
css
a[href="https://example.org"] { }可以匹配：
html
<a href="https://example.org"></a>[attr~=value]：匹配列表
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
🌰：
css
a[data-word~="new"] { }可以匹配：
html
<a data-word="new animal"></a>[attr|=value]：匹配前缀
表示带有以 attr 命名的属性的元素，属性值为value或是以value-为前缀（-为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
🌰：
css
p[lang|="zh"] { }可以配下面两个p元素：
html
<p lang="zh"></p>
<p lang="zh-CN"></p>[attr^=value]：匹配开头
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
🌰：
css
a[href^="https"] { }可以匹配：
html
<a href="https://example.org"></a>[attr$=value]：匹配结尾
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
🌰：
css
a[href$=".org"] { }可以匹配：
html
<a href="https://example.org"></a>[attr*=value]：匹配包含
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
🌰：
css
a[href*="example"] { }可以匹配：
html
<a href="https://example.org"></a>[attr operator value i]：忽略大小写
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
🌰：
css
a[href*="EXAMPLE" i] { }可以匹配：
html
<a href="https://example.org"></a>组合选择器
选择后代 A B
选择子代 A > B
选择相邻兄弟 A + B
选择兄弟 A ~ B
伪类
显示状态伪类
:fullscreen:modal:picture-in-picture
输入伪类
:autofill:enabled:disabled:read-only:read-write:placeholder-shown:default:checked:indeterminate:blank:valid:invalid:in-range:out-of-range:required:optional:user-invalid
语言相关
:dir():lang()
位置相关
:any-link:link:visited:local-link:target:target-within:scope
资源状态相关
:playing:paused
时间相关
:current:past:future
结构相关
:root:empty:nth-child:nth-last-child:first-child:last-child:only-child:nth-of-type:nth-last-of-type:first-of-type:last-of-type:only-of-type
交互相关
:hover:active:focus:focus-visible:focus-within
逻辑相关
:is():not():where():has()
伪元素
::before::after::first-line::first-letter::backdrop::cue::cue-region::file-seletor-button::marker::part()::placeholder::selection::slotted()