CSS 选择器速查表
为什么还要再写一份 CSS 速查表？
目录
基本选择器
后代选择器
多选器
组合选择器
同级选择器
伪选择器
伪选择器（链接和输入）
属性选择器
资源：
掌握 CSS 选择器的有效使用方法对前端开发人员非常有用。我制作了一份常用选择器的速查表。
为什么还要再写一份 CSS 速查表？
虽然还有其他 CSS 选择器速查表（参见资源），但我发现它们要么缺乏分组/组织，要么缺少示例，要么信息过多。
这就是为什么我把这份速查表分成 8 种不同类型的原因。每组开头都会有一个 HTML 代码片段。请将该 HTML 代码片段与该组代码一起使用（并随意尝试！）。这份列表并不完整，我的目标是尽可能涵盖所有内容。下面的列表应该可以满足大多数开发需求。
目录
基本选择器
它们用于选择元素/ID/类。它们也是最常用且最容易记忆的。
<div id="app">
<div class="container">
<p class="hello">Hello</p>
<p class="hola">Hola</p>
</div>
<div class="other">
I am left behind...
</div>
</div>
- 元素选择器：
Element用于选择任何给定的元素。
p { color: blue; }
div { color: magenta; }
- 类选择器：
.class它会选择所有包含给定类名的元素。
.hello {
color: red;
}
- ID 选择器：
#id它选择包含给定 HTML ID 的元素。
#app {
color: red;
}
- 通用选择器：
*它会选择所有元素。
* {
color: yellow;
}
后代选择器
这些是用于选择任何元素后代的选择器。
<div class="container">
<div class="paragraph-container">
<p id="hola-id" class="hola-class">Hola world</p>
<p class="hello-class">Hello world</p>
<p class="hello-class again-class">Hello again world</p>
</div>
</div>
- 任意后代选择器：
A B选择元素 B中所有属于元素 A 的后代元素。后代元素可以嵌套很深。
.container .hello-class {
color: red;
}
我们可以将此与以下方式结合*起来得到：
.paragraph-container * {
color: blue;
}
这将选中所有内容。 .paragraph-container
- 子节点选择器：
A > B与任何后代选择器不同，此选择器仅选择直接后代/子节点。
.paragraph-container > .hello-class {
color: blue;
}
下面的方法行不通，因为.hello-class在这种情况下它不是直接后代：
.container > .hello-class {
color: blue;
}
多选器
<div class="container">
<div class="paragraph-container">
<p id="hola-id" class="hola-class">Hola world</p>
<p class="hello-class">Hello world</p>
<p class="hello-class again-class">Hello again world</p>
</div>
<p class="outside-class">I'm outside</p>
</div>
多重选择器允许我们同时选择多个不相关的元素。
- 多个选择器：
A, B, C, ...要选择多个元素/类/ID，请使用以下方式连接它们,：
.outside-class, .again-class, .hola-class {
color: purple;
}
组合选择器
组合选择器允许您使用多个引用来选择非常具体的元素。一个常见的用例是，通过给按钮添加类名，实现鼠标悬停/点击按钮时的高亮显示效果.active。
<div class="container">
<div class="paragraph-container">
<p id="hola-id" class="hola-class">Hola world</p>
<p class="hello-class">Hello world</p>
<p class="hello-class active">Hello again world</p>
</div>
<p class="outside-class">I'm outside</p>
</div>
- 组合选择器：
AB. 这会选择同时包含 A 和 B 的元素。语法类似于后代选择器，只是没有空格。
p.active {
color: yellow;
}
我们可以组合任何元素和类：
p#hola-id {
color: blue;
}
.hello-class.active {
color: red;
}
同级选择器
这些选择器会针对它们的同族成员。
<div class="container">
<div class="paragraph-container">
<p id="hola-id" class="hola-class">Hola world</p>
<p class="hello-class">Hello world</p>
<p class="hello-class again-class">Hello again world</p>
</div>
<p class="outside-class">I'm outside</p>
</div>
- 相邻兄弟选择器（严格）：.
A + B选择紧跟在该元素之后的一个兄弟元素。sibling1 + sibling2
#hola-id + .hello-class {
color: blue;
}
请注意，下面的 CSS 代码不会生效，因为.again-class尽管它是#hola-id的兄弟元素，但相隔2 个元素。
#hola-id + .again-class {
color: blue;
}
- 任意相邻兄弟选择器（宽松）：
A ~ B类似于相邻兄弟选择器，但会选择其后的任意兄弟选择器。这个语法~让我想起了耸肩🤷♂️🤷♀️——因此~比更宽松+。
#hola-id ~ .hello-class {
color: purple;
}
注意：反向操作无效（B ~ A与以下情况不同A ~ B）：
.again-class ~ #hola-id {
color: red
}
伪选择器
<div class="container">
<div class="paragraph-container">
<p id="hola-id" class="hola-class">Hola world</p>
<p class="hello-class">Hello world</p>
<p class="hello-class again-class">Hello again world</p>
</div>
<p class="outside-class">I'm outside</p>
<ul id="list-id" class="list-class">
<li class="list-item-class">First</li>
<li class="list-item-class">Second</li>
<li class="list-item-class">Third</li>
<li class="list-item-class">Fourth</li>
<li class="list-item-class">Fifth</li>
</ul>
<div class="single-paragraph-container">
<p>I'm the only child of this span</p>
</div>
</div>
- 首子选择器：
A:first-child它会选择每个目标元素，该元素必须是其父元素的第一个子元素。这个定义乍一看可能有点令人困惑。我的理解是，目标元素A本身必须是某个父元素的第一个子元素。
注意短语：父母的第一个孩子。
li:first-child {
color: blue;
}
上述方法有效，因为li有一个父对象：ul。li也是ul的第一个子对象。
如果你瞄准目标会发生什么ul？
ul:first-child {
color: red;
}
什么也没发生。这是因为虽然ul它有一个父节点（div具有类container），但ul它不是第一个子节点（它是第三个子节点）。
下面的代码可以运行，因为.paragraph-container它是.container第一个子节点。
.paragraph-container:first-child {
color: red;
}
- 最后一个子节点选择器：
A:last-child。其工作方式与第一个子节点选择器类似，区别在于目标节点必须是最后一个子节点，而不是第一个子节点。
li:last-child {
color: purple;
}
- 唯一子节点选择器：
A:only-child选择A其父节点的唯一子节点。类似于第一个子节点和最后一个子节点选择器。不同之处在于，目标节点不能有任何同级节点。
p:only-child {
color: red;
}
请注意，虽然我们有多个p元素，但只有最后一个元素适用，因为其他p元素并非其父元素的唯一子元素，它们还有其他同级元素。
- 第 N 个子节点选择器：
A:nth-child(n)它会选择其父节点的第 n 个子节点作为目标节点。
li:nth-child(2) {
color: red;
}
现在我们来试试p：
p:nth-child(2) {
color: red;
}
你能看出为什么有两个p元素改变了颜色吗？
- 最后第 n 个子节点选择器：
A:nth-last-child(n)。它与第 n 个子节点选择器类似，只是它是从最后一个子节点开始计数的。
li:nth-last-child(2) {
color: red;
}
- 非选择器：
A:not(B). 选择所有A非空元素B。
p:not(.outside-class) {
color: blue;
}
- 第一种类型选择器：
A:first-of-type它会选择其同级元素中第一个具有该类型的元素。
这个听起来和:first-child我第一次听到它时的感觉很相似。为了感受一下它的不同之处，我们来实际操作一下：
li:first-of-type {
color: blue;
}
好吧，这个例子不太好，因为它和li:first-child😅的结果一样。我们来看另一个例子：
p:first-of-type {
color: red;
}
这个更好。对比一下p:first-child。你会注意到，使用时中间部分p会变成红色first-of-type，而使用时则不会first-child。这是因为中间部分p是它所有兄弟元素中的第一个p元素类型💡。
- 最后一种类型选择器：
A:last-of-type。与上面一样，但方向相反。
li:last-of-type {
color: blue;
}
- 第 N 个类型选择器：
A:nth-of-type(n)。与上面的两个选择器类似，但此选择器选择该时间的第 n 个元素。
li:nth-of-type(2) {
color: blue;
}
我们来尝试不同的元素：
p:nth-of-type(2) {
color: blue;
}
如果我们把它改成p:nth-of-type(1)，它的行为就和一样first-of-type。同样，如果我们把它改成p:nth-of-type(4)，颜色也不会改变——这是因为兄弟元素中没有第四个p元素。
- 仅类型选择器：
A:only-of-type. 选择仅具有该类型的元素（不包括同级元素）。
p:only-of-type {
color: purple;
}
注意有两个p元素改变了颜色。这是因为这两个p元素没有相同类型的同级元素。
伪选择器（链接和输入）
下面列出了更多伪选择器。这些选择器通常与链接（a）相关联（尽管它们也可能适用于非链接元素）。
<div id="app">
<a class="cheesyLink" href="#">I like cheese</a>
<a class="sweetLink" href="#">I like donut</a>
<div class="burger">I like cheezburger</div>
<div class="container">
<form onsubmit="event.preventDefault()">
<input class="myinput"type="text" />
<input class="mysubmit" type="submit" />
</form>
</div>
</div>
- 悬停选择器：
A:hover选择悬停的元素。通常用于高亮显示链接。
a:hover {
color: red;
}
它不一定非得是a标签。这个选择器适用于任何内容。
.burger:hover {
color: red;
}
- 焦点选择器：
A:focus. 选择一个已聚焦的元素。通常与 . 一起使用input。
input:focus {
background: red;
}
- 活动选择器：
A:active选择处于活动状态的元素。
注意：点击后背景会发生变化。
.cheesyLink:active {
background: red;
}
- 链接选择器：
A:link它会选择所有尚未被点击的链接。
a:link {
background: blue;
}
属性选择器
属性选择器可用于选择 HTML属性。
<div for="chocolate">Chocolate</div>
<div for="peanut">Peanut</div>
<div for="butter">Butter</div>
<div>Jelly</div>
- 基本属性选择器： . 选择所有具有属性的
A[B]元素。AB
div[for] {
color: red;
}
- 特定属性选择器：
A[B="C"]选择所有A具有B特定值的属性的元素C
div[for="chocolate"]{
color: blue;
}
- 特定属性选择器（起始值）：
A[B^="C"]选择所有具有起始值的属性的元素。请注意，这A是起始字符串的正则表达式。BC^
div[for^="cho"] {
color: magenta;
}
- 特定属性选择器（结尾）：
A[B$="C"]选择所有具有以该结尾为值的A属性的元素。请注意，这是用于指定结尾字符串的正则表达式。BC$
div[for$="er"] {
color: yellow;
}
- 特定属性选择器（通配符）：
A[B*="C"]选择所有属性值包含该值的元素A。B请C注意，*在正则表达式和 glob 模式中，它通常是通配符。
div[for*="ut"]{
color: cyan;
}
好了，各位！如果需要更多参考资料，请查看下方资源。如果您有其他方法可以改进这份速查表，使其更加实用，欢迎在下方留言。