什么是选择器？
它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。--抄的mdn的
选择器有哪些？
类型、类和ID选择器
- 类型选择器有时也叫做“标签名选择器”或者是“元素选择器”
- 全局选择器
*，最常见的用法* { margin: 0; padding: 0 }。
当然它也可以标识选中某个元素下的所有元素，如：.some-selector * { margin: 0 }。
还有一种用法是让选择器更易读。如我们在写伪类的时候，article :first-child { font-weight: bold }，本意是将article下的第一个元素加粗，但是这会和article:first-child混淆，而后者选择了作为其他元素的第一子元素的<article>元素。
所以讲上述的选择器可以写成article *:first-child { font-weight: bold }。
- 类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。
我们也可以指定某个特定元素的类，如：span.highlight { background-color: yellow; } h1.highlight { background-color: pink; }。
也可以组合的使用类，如：.notebox { border: 4px solid #666; padding: .5em; } .notebox.warning { border-color: orange; font-weight: bold; } .notebox.danger { border-color: red; font-weight: bold; }
- ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。
属性选择器
这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。
| 选择器 |
例子 |
描述 |
| [attr] |
li[class] |
带有class属性的li，如<li class />、<li class="a" />和<li class="b" />
|
| [attr=value] |
li[class="a"] |
class属性等于a的li，如<li class="a" />
|
| [attr~=value] |
li[class~="a"] |
属性中至少有一个等于值（多个值之间有空格隔开）。例子中的选择器匹配 <li class="a" />和<li class="a b" />，不匹配 <li class="ab" />。 |
| [attr|=value] |
div[lang|="zh"] |
匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value。如 <html lang="zh" />或者<html lang="zh-CN" />
|
| [attr^=value] |
li[class^="a"] |
class属性值以a开头的元素，如<li class="a" />, <li class="ab" />
|
| [attr$=value] |
li[class$="a"] |
class属性值以a结尾的元素，如<li class="a" />, <li class="ba" />
|
| [attr*=value] |
li[class*="a" |
class属性值包含a的元素，如<li class="a" />、<li class="ab" />和<li class="ba" />
|
大小写敏感
如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。
<style>
li[class^="a"] {
background-color: yellow;
}
li[class^="a" i] {
color: red;
}
</style>
<h1>Case-insensitivity</h1>
<ul>
<li class="a">Item 1</li> // 红色字体，黄色背景
<li class="A">Item 2</li> // 红色字体
<li class="Ab">Item 3</li> // 红色字体
</ul>
伪类和伪元素
伪类
| 选择器 |
描述 |
:active |
在用户激活（例如点击）元素的时候匹配。 如button:active { color: blue }
|
:any-link |
匹配一个链接的:link和:visited状态。 |
:blank |
匹配空输入值的<input>元素。如 input:blank { border: 1px solid red }
|
:checked |
匹配处于选中状态的单选或者复选框。如input[type="checkbox"]:checked { border: 1px solid red }
|
:default |
匹配一组相似的元素中默认的一个或者更多的 UI 元素。 |
:disabled |
匹配处于禁用状态的元素 |
:empty |
匹配没有子元素的元素。 |
:enabled |
匹配处于启用状态的元素。 |
:first-child |
匹配兄弟元素中的第一个元素。 |
:first-of-type |
匹配兄弟元素中第一个某种类型的元素。 |
:focus |
当一个元素有焦点的时候匹配。 |
:focus-visible |
当元素有焦点，且焦点对用户可见的时候匹配。 |
:focus-within |
匹配有焦点的元素，以及子代元素有焦点的元素。 |
:hover |
当用户悬浮到一个元素之上的时候匹配。 |
:indeterminate |
匹配未定态值的 UI 元素，针对<input type="radio" />，<input type="checkbox" /> 和 <progress />
|
:in-range |
用一个区间匹配元素，当值处于区间之内时匹配。如<input type="number" max="6" min="2" />，<input type="date" min="2022-01-01" max="2022-12-31">
|
:invalid |
匹配诸如<input>的位于不可用状态的元素。 |
:lang |
基于语言匹配元素。 如：<p lang="zh-cn" >text</p> p[lang="zh-cn"] { color: red }
|
:last-child |
匹配兄弟元素中最末的那个元素。 |
:last-of-type |
匹配兄弟元素中最后一个某种类型的元素。 |
:link |
匹配未曾访问的链接。 |
:is() |
匹配传入的选择器列表中的任何选择器。 |
:not |
匹配作为值传入自身的选择器未匹配的物件。 |
:nth-child |
匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
:nth-of-type |
匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
:nth-last-child |
匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
:nth-last-of-type |
匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
:only-child |
匹配没有兄弟元素的元素。 |
:only-of-type |
匹配兄弟元素中某类型仅有的元素。 |
:optional |
匹配不是必填的 form 元素。 |
:out-of-range |
按区间匹配元素，当值不在区间内的的时候匹配。 |
:placeholder-shown |
匹配显示占位文字的 input 元素。 |
:read-only |
匹配用户不可更改的元素。 |
:read-write |
匹配用户可更改的元素。 |
:required |
匹配必填的 form 元素。 |
:root |
匹配文档的根元素。 |
:scope |
匹配任何为参考点元素的的元素。 |
:valid |
匹配诸如<input>元素的处于可用状态的元素。 |
:target |
匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段。 |
:visited |
匹配已访问链接。 |
伪元素
| 选择器 |
描述 |
::after |
匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
::before |
匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
::first-letter |
匹配元素的第一个字母。 |
::first-line |
匹配包含此伪元素的元素的第一行。 |
::selection |
匹配文档中被选择的那部分。 |
关系选择器
| 选择器 |
例子 |
描述 |
| 后代选择器 |
body article p |
|
| 子代选择器 |
article > p |
|
| 相邻兄弟选择器 |
p + img |
|
| 通用兄弟选择器 |
p ~ img |
