作为一名前端开发人员，很多时候你会说，“那个接受子元素并应用 CSS 的属性是什么？” 或有相同想法的东西。当你开始学习 CSS 时，它是无穷无尽的。
选择器是您开始使用 CSS 时首先需要了解的内容之一。一旦深入研究 CSS 选择器，您会发现 CSS 选择器比您最初想象的要多得多。无论您是经验丰富的 Web 开发人员还是新手，CSS 选择器备忘单总能派上用场，以创建跨浏览器兼容的网站。
借助终极 CSS 选择器备忘单，您将学习复杂的功能强大的 CSS 选择器，通过允许您根据属性控制和操作多个元素，从而节省大量手动编码。
什么是 CSS 选择器？
CSS 选择器是 CSS 规则集的一部分，用于选择我们想要设置样式的元素。它们在 CSS 文件中或在声明 CSS 时的“样式”标签内使用。CSS 选择器在一次将样式应用于多个元素方面起着至关重要的作用。我们可以使用“样式”属性来使用内联 CSS。
但是如果我们想将相同的 CSS 应用于 15 个元素，我们必须这样做 15 次。如果有些东西需要改变怎么办？我们必须再做 15 次那个版本。一个明智的选择是使用选择器，使用标识符对元素进行分组，并在一个地方应用 CSS。下面给出了一个选择器的例子。
|
1
2
3
4
5
6
|
p, h1, #my_id {
font-weight: bold;
text-decoration: underline;
}
|
CSS 选择器并不是一个需要学习的独特学科。它们只是对常规简单 CSS 样式的增强，允许我们一次选择多个元素。从现在开始，我们将从基本的选择器开始，然后向上移动到更复杂的选择器。
阅读专业测试人员如何在 Selenium 自动化脚本中使用 CSS 选择器？
在这篇文章中，我们将介绍 CSS 选择器备忘单，它将指导您的网页设计生涯并改进您已经用于选择元素的方法。
让我们从我们的 CSS 选择器列表开始吧！
CSS 简单选择器
我们的 CSS 选择器备忘单列表中的第一个是简单选择器。CSS 中的简单选择器不包含任何分层包装或 CSS 中的过多逻辑。CSS 简单选择器只是通过标识符定位元素并实现样式。
CSS 标记选择器
最容易应用的 CSS 选择器是从 HTML 中捕获“标签”并在其上实现样式。“标签”是预定义的 HTML 标签，使用 CSS 选择器，您只需一行即可捕获所有标签。在下面的示例中，我们从 HTML 代码中选择了标签“H1”，并将其文本颜色固定为红色，字体大小为 50px。
|
1
2
3
4
5
6
7
|
<style>
h1 {
color: red;
font-size: 50px;
}
</style>
|
作为 Web 开发人员，您会发现很多时候使用 CSS 简单选择器，因为团队有时会解决一些问题，例如所有标题的样式或段落的外观。CSS 简单选择器可以捕捉所有这些，并帮助您立即对它们进行样式化。
CSS ID 选择器
这是我们的 CSS 选择器备忘单中最流行的 CSS 选择器，用于设置网页样式。“id”选择器确定有助于样式的元素的“id”。ID 是一种很好的方式来标记各种元素，然后使用 CSS 选择器或 JavaScript 来选择这些元素并执行一些操作。例如，如果您希望某个部分或页面使用不同的颜色，则可以为所有元素使用相同的 id 并实现功能。
与 ID 一起使用的 CSS 选择器以符号“#”开头，后跟样式：
|
1
2
3
4
5
6
7
8
|
<style>
#my_id {
color: red;
font-size: 50px;
}
</style>
<p id = "my_id">CSS Selector</p>
|
上面的代码将改变所有标记为“my_id”的元素的颜色和字体大小。
CSS 类选择器
与 CSS ID 选择器类似，CSS 类选择器选择具有特定类名的所有元素。如果至少有一个元素具有定义的类名，则应用样式。与 ID 类似，类名也是通过赋予相同类来选择多个元素的好方法。
此外，在使用某些框架（例如 Bootstrap）时，我们会为特定元素（例如“大按钮”）获得预定义的类。我们可以通过类选择器应用 CSS，所有大按钮都将更改为定义的设置。在这种情况下，CSS 类选择器变得比 CSS ID 选择器更快。
|
1
2
3
4
5
6
7
8
|
<style>
.my_class {
color: red;
font-size: 50px;
}
</style>
<p class = "my_class">CSS Class Selector</p>
|
如上面的 CSS 选择器备忘单示例所示，“.” 符号表示 CSS 中的类名。在上面的代码中，“my_class”类用于选择元素。
对 CSS 选择器进行分组
很多时候，多个元素将在网页上具有相同的样式配置。因此，我们可以将它们分组并让网页知道这些元素将共享一些共同的样式，而不是为不同的 ID 或类多次复制粘贴相同的配置。
在我们的 CSS 选择器备忘单的以下示例中，my_id 和 p 组合在一起以将它们着色为红色。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
#my_id, p {
color: red;
}
</style>
</head>
<body>
<center>
<h1 id = "my_id">I am a heading</h1>
<p>I am a paragraph</p>
</center>
</body>
</html>
|
输出
要对多个选择器进行分组，只需用逗号分隔它们，如上面的代码所示。上面的输出是在LambdaTest的帮助下取出的，这是一个拥有 3000 多个浏览器和浏览器版本的云测试平台，它可以帮助您大规模执行浏览器兼容性测试，而无需担心本地基础设施，
CSS 通用选择器
一个网站因其独特的功能和标志性风格而变得独一无二。例如，建立签名的一个重要部分是字体类型。网站使用独特且不同的字体类型，因为用户通常会记住具有这些小功能的网站。当他们在其他任何地方看到相同的字体时，就会让他们想起您的网站。至此，任务完成！
这种雄心勃勃的想法涉及更改整个网站的字体类型（或任何其他属性）。我们不能在网页上的任何地方都实现该属性。无论如何，我们尝试使用 CSS Selector 减少重复行为而不是增加它们。因此，CSS 开发人员想到了一个奇妙的属性，称为通用选择器，它可以选择网页上的所有内容，即它是通用的。这在我们的 CSS 选择器备忘单中占有一席之地。
|
1
2
3
4
5
6
7
8
|
<style>
* {
color: red;
}
</style>
<h1 id = "my_id">I am a heading</h1>
<p>I am a paragraph</p>
|
我们的 CSS 选择器备忘单中的上述选择器选择每个元素并将其在网页上涂成红色。
CSS 特定类选择器
CSS 类选择器有一个特定的选择器属性来满足当开发人员只需要选择一个特定元素而不是所有具有相同类的元素时的用例需求。例如，我只想将我的“p”标签涂成红色，但我也有其他元素也定义了相同的类名和标签名。在这种情况下，我们可以使用使用同一类的特定元素的特定类选择器。
在下面的示例中，所有元素都被标记为类名“my_class”，但只有 H1 将被涂成红色。
|
1
2
3
4
5
6
7
8
|
<style>
h1.my_class {
color: red;
}
</style>
<h1 class = "my_class">I am a heading</h1>
<p class = "my_class">I am a paragraph</p>
|
运行上面的代码来观察浏览器屏幕上的输出。
这使我们结束了我们的 CSS 选择器备忘单中的简单 CSS 选择器。下一节专门介绍使我们能够使用不同元素的混合来仅针对特定元素的技术。
CSS 组合器选择器
我们的 CSS 选择器备忘单中的下一种选择器是 CSS 组合器选择器。顾名思义，CSS 组合器选择器是多个选择器的组合，或者通常是上一节中描述的多个简单选择器的组合。使用 CSS 组合器选择器，我们可以定义两个简单选择器之间的关系，并且只选择满足关系的元素。
CSS 后代选择器
这个 CSS 选择器列表中的第一个是 CSS 后代选择器，作用于指定元素的后代。后代选择器是通过用空格分隔两个元素来编写的，其中第二个元素必须是第一个元素的后代。关系“后代”表示该元素应该在另一个元素内（在第一个元素标签关闭之前）。当找到这种关系时，定义的样式将应用于后代元素。
|
1
2
3
4
5
6
7
8
9
10
|
<style>
div p {
color: red;
}
</style>
<div>
<h1>I am a heading</h1>
<p>I am a paragraph</p>
</div>
|
在这里，只有“p”标签内的内容会变成红色，因为它是“div”标签的后代。
CSS 子选择器
CSS 子选择器是我们的 CSS 选择器备忘单中的另一个选择器，它有点类似于 CSS 后代选择器，但使用此选择器，第二个元素应该是第一个元素的子元素。子选择器用“>”符号定义，表示第二个元素是第一个元素的子元素。那么，作为后裔和作为孩子有什么区别呢？我们的 CSS 选择器列表中的以下示例将帮助您理解这两个概念：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
div > h3 {
color: red;
}
</style>
</head>
<body>
<br><br>
<center>
<div>
<h3>I am a child</h3>
<h3>I am a child</h3>
<span><h3>I am a descendant</h3></span>
<h3>I am a child</h3>
</div>
</center>
</body>
</html>
|
输出
第三个“p”标签在“div”标签内，但不直接（因为它在 span 标签内）。因此，第三个“p”不是“div”标签的子标签，而是 span 标签的子标签。因此第三个“p”标签不会变成红色。
CSS 相邻兄弟选择器
我们 CSS 选择器列表中的下一个选择器是 CSS 相邻兄弟选择器。CSS 相邻兄弟选择器选择元素，紧随其后的是第一个元素。所有其他元素序列都被忽略，只考虑直接跟随的元素。请注意，元素必须“跟随”而不是“内部”元素。CSS 相邻兄弟选择器由符号“+”表示。在下面的示例中，我们检查“div”标签内相邻的“h3”标签。
|
1
2
3
4
5
6
7
8
9
10
|
<style>
div + h3 {
color: red;
}
</style>
<div>
<h3>I am not adjacent</h3>
<h3>Me neither</h3>
</div>
<h3>I am adjacent</h3>
|
运行上面的代码，观察浏览器中哪一个H3内容变红了。
CSS 通用兄弟选择器
CSS 通用兄弟选择器选择所有的兄弟，即当元素被跟随而不是在 CSS 相邻兄弟选择器中发生的第一个兄弟时。CSS 通用兄弟选择器只是 CSS 中相邻兄弟选择器的通用形式。以下代码使用与上面相同的代码段，调整其选择器。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
div ~ h3 {
color: red;
}
</style>
</head>
<body>
<br><br>
<center>
<div>
<h3>I Am Not Adjacent</h3>
<h3>Me Neither</h3>
</div>
<h3>I am adjacent</h3>
<h3>Me Too</h3>
</center>
</body>
</html>
|
输出
如上图所示，名为“p”的“div”标签的所有兄弟姐妹都是红色的。请注意，此处的兄弟、子代和后代引用网页的文档对象模型。
CSS 伪类选择器
CSS 伪类选择器是我们的 CSS 选择器备忘单中流行的选择器，用于为组件设置条件样式。伪类获取特定状态的元素，而不是像 CSS 简单选择器那样没有任何条件。例如，伪类 hover 仅当鼠标移到元素上时才会选择元素。伪类为我们提供了更多的控制权，使我们能够快速设置元素样式，而无需借助 JavaScript。
CSS 链接伪类选择器
我们的 CSS 伪类选择器列表中的第一个伪类是链接选择器。链接选择器将样式应用于我们附加此类的元素的未访问链接。要使用链接伪类选择器，“link”关键字与伪类符号“:”一起使用。以下示例在锚标记上使用链接伪类选择器。
|
1
2
3
4
5
6
7
|
<style>
a:link {
color: red;
}
</style>
<a href = "www.google.com">This is an unvisited link</a>
|
在访问之前，上述链接将显示为红色。请注意，“href”属性在链接伪类中起着至关重要的作用。即使锚标签用于链接，如果没有“href”标签，也不会被识别。因此，伪类选择器将不起作用。
CSS 访问伪类选择器
链接伪类选择器适用于未访问的链接。当我们点击同一个链接时，该链接的已访问标志被打开，因此用户可以知道他已经访问过它。访问的伪类选择器将样式应用于访问的链接。这里使用的关键字是“visited”，以及伪类的“:”符号。
|
1
2
3
4
5
6
7
|
<style>
a:visited {
color: red;
}
</style>
<a href = "https://www.google.com" target="_blank">This is a link</a>
|
用户点击后链接会变成红色。
CSS 悬停伪类选择器
当鼠标悬停在选择器所附加的元素上时，悬停伪类选择器起作用。CSS hover 伪类带来了一些独特的样式元素，例如更改背景颜色等。悬停伪类由关键字“hover”和伪类的“：”符号标识。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
.my_div {
background-color: blue;
width: 300px;
height: 300px;
}
.my_div:hover {
background-color: red;
}
</style>
</head>
<body>
<br><br>
<center>
<div class="my_div"></div>
</center>
</body>
</html>
|
输出
正如您在上面的 CSS 选择器备忘单示例中所见，div 框使用悬停标签在鼠标悬停时将其背景从蓝色更改为红色。
CSS 主动伪类选择器
我们的 CSS 选择器列表中的下一个是 CSS 活动伪类选择器。活动的伪类选择器在用鼠标（鼠标单击）选择元素时选择元素。活动的伪类选择器用“active”关键字和伪类符号“:”来标识。
|
1
2
3
4
5
6
7
8
9
10
11
|
<style>
.my_div {
background-color: blue;
width: 300px;
height: 300px;
}
.my_div:active {
background-color: red;
}
</style>
<div class="my_div"></div>
|
运行上面调整过的代码来注意悬停伪类和活动伪类之间的区别。
CSS 检查伪类选择器
CSS 选择器备忘单中的另一个伪类选择器是 CSS 检查选择器。选中的选择器在元素处于“选中”状态时选择它。由于需要“选中”状态，因此它仅适用于复选框和单选按钮。使用的关键字是“检查”以及“：”符号。以下代码在选中复选框时更改文本的颜色。
|
1
2
3
4
5
6
7
|
<style>
input[type = checkbox]:checked + label{
color: red;
}
</style>
<input type="checkbox" class="my_button" value="Radio Button">
<label for = "check_button">Radio Button</label>
|
注意：上面的代码使用了 CSS 属性选择器，这将在下一节中讨论。
该代码将文本颜色从黑色更改为红色。使用 CSS 选中选择器的一个流行用例是构建带有缩略图的图片库，只有在用户选中缩略图时才能查看。这样的例子可以在电子商务网站上看到。
CSS 第一子伪类
first-child CSS 类选择器在所有出现的元素中选择第一个子元素。第一个孩子伪类由术语“第一个孩子”和“：”符号标识。在我们的 CSS 选择器备忘单的以下示例中，请注意如何使用以下代码在网页上选择第一个“p”子项：
|
1
2
3
4
5
6
7
8
|
<style>
p:first-child{
color: red;
}
</style>
<p>This is the first child</p>
<p>This isn't</p>
|
在上面的示例中，第一个孩子被选中并变为红色。通过查看以下同时使用 CSS 选择器组和 first-child 伪类的示例，可以绘制出更清晰的图像：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
ul li:first-child{
color: red;
}
</style>
</head>
<body>
<br><br>
<ul>
<li>I am the first-child</li>
<li>Am I?</li>
<li>Am I?</li>
<li>
<ul>
<li>I am the first-child</li>
<li>Am I?</li>
<li>Am I?</li>
</ul>
</li>
</ul>
</body>
</html>
|
输出
注意两个“li”标签是如何变成红色的，因为它们都是“ul”标签之后的第一个“li”。因此，他们都是第一个孩子。这些操作适用于与标题相关的目的和第一个元素表示所遵循内容的场景。
其他流行的 CSS 伪类
下表表示我们的 CSS 选择器列表中一些更常见的伪类。您可以尝试它们并将它们混合以制作色彩丰富且合乎逻辑的网页。
| 伪类 | 意义 | 例子 |
|---|---|---|
| : 禁用 | 当输入被禁用时。 |
|
| ： 空的 | 当元素没有子元素时。 |
|
| : 启用 | 当输入启用时。 |
|
| ： 重点 | 当输入元素被聚焦时。 |
|
| ：最后一个孩子 | 当元素是最后一个子元素时。 |
|
| :nth-child(n) | 当元素是第 n 个孩子时。 |
|
| :nth-child(n) | 当元素是第 n 个孩子时。 |
|
| ：唯一的孩子 | 当元素是唯一的孩子时。 |
|
| ： 只读 | 当输入元素具有指定的只读属性时。 |
|
将伪类与 CSS 类结合起来
除了我们的伪类列表和最终的 CSS 选择器列表之外，我们还可以将它们与 CSS 类结合起来，以缩小我们的选择范围并减少我们的选择器在查找元素时的工作量。我们可以选择与 HTML 标记一起标记的特定类，并通过这种组合在它们上使用伪类选择器。在下面的示例中，我为其中一个 div 标签分配了一个类，以便稍后使用选择器进行选择。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
div {
background-color: blue;
width: 300px;
height: 300px;
}
div.my_div:hover{
background-color: red;
}
</style>
</head>
<body>
<br><br>
<center>
<div></div>
<br><br>
<div class="my_div"></div>
</center>
</body>
</html>
|
输出
它比应用多个类和多个选择器来实现我们的目标更容易和方便。
CSS 伪元素选择器
与伪类类似，我们的 CSS 选择器列表包含另一个类似的属性，称为伪元素选择器。使用伪类，我们选择完整的元素并对其应用样式。在伪元素中，我们抓取元素的特定部分而不是完整元素，并仅在这些部分上应用样式。它们适用于某些情况，例如在特定标签之前插入一些元素等。
伪元素选择器由双冒号标识，而不是我们在伪类中使用的一个。这个符号在 CSS 规范 Level 3 中被引入，用来区分伪元素和伪类。在 CSS 3 之前，它们都使用单冒号通知。让我们看看 CSS 选择器中使用的一些重要的伪元素。
CSS 第一行伪元素选择器
在我们的 CSS 选择器列表中，第一个也是最常用的伪元素选择器是“第一行”选择器。解码此选择器的作用不涉及科学。当我们需要对元素的第一行进行样式设置时，我们使用“第一行”选择器。使用的关键字是“第一行”以及伪元素的“::”符号。
|
1
2
3
4
5
6
|
<style>
h2::first-line{
color: green;
}
</style>
<h2>Your Text</h2>
|
上面的代码会将第一行的颜色变成绿色。请注意，“第一行”伪元素仅适用于网页上的块级元素。作为开发人员，您可以在使用“第一行”时使用以下 HTML 或 CSS 属性：
- 字体属性
- 颜色属性
- 背景属性
- 字间距
- 字母间距
- 文字装饰
- 垂直对齐
- 文本转换
- 线高
- 清除
CSS 首字母伪元素选择器
我们的 CSS 选择器备忘单中的下一个是“首字母”伪元素 CSS 选择器，它选择我们标记它的元素的第一个字母。然后第一个字母元素将定义的样式应用于该字母。“首字母”伪选择器在文章写作中很常见。我们经常看到第一个字母更大更粗，有不同的颜色或任何其他类似的样式。这可以通过关键字“first-letter”和伪元素符号“::”来实现。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
h2::first-letter{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<br><br>
<center>
<div></div>
<br><br>
<h2>Text</h2>
</center>
</body>
</html>
|
输出
上面的代码放大了第一个元素并改变了它的颜色。
与“第一行”伪元素一样，“首字母”元素也可以仅应用于块级元素。作为 Web 开发人员，以下属性可以与“首字母”伪元素一起使用：
- 字体属性
- 颜色属性
- 背景属性
- 边距属性
- 填充属性
- 边框属性
- 文字装饰
- 垂直对齐（仅当“float”为“none”时）
- 文本转换
- 线高
- 漂浮
- 清除
伪元素选择器之前的 CSS
CSS，“before”伪元素选择器，在目标元素之前添加内容。内容可以按照团队批准的 UI 样式。一个示例可以是在 HTML 中开始标题之前使用引号。在我们的 CSS 选择器备忘单中的以下示例中可以注意到类似的事情：
|
1
2
3
4
5
6
|
<style>
p::before{
content: "««";
font-size: 25px;
}
</style>
|
上面的代码将在每个段落的开头插入««。
伪元素选择器后的 CSS
由于 CSS“before”元素将内容放在目标元素之前，CSS after 伪元素将内容放在目标元素之后。下面的代码演示了段落中使用的 before 和 after 伪元素。
上面的代码使用一些样式元素作为段落的开头和结尾。CSS“之前”和“之后”伪元素在使用上非常常见且非常微妙。通常，您会看到这些元素，但不会注意到任何特别之处，因为它现在使用得太普遍了。
在元素或某些设计元素的开头添加图像，甚至应用引号，都可以很好地用于 CSS 伪元素之后和之前。CSS 中的“before”和“after”伪元素有数百个用例。如果您使用了独特的东西，我们会在评论部分呼吁这种独特的设计，并帮助其他人创造性地思考。
CSS 标记伪元素选择器
接下来在我们的 CSS 选择器备忘单中是 CSS 标记伪元素，它从网页中选择标记元素并将定义的样式应用到它上面。标记元素是项目符号点、编号点或任何其他“li”元素。以下代码将标记标记为红色：
|
1
2
3
4
5
6
7
8
9
10
|
<style>
ul li::marker{
color: red;
}
</style>
<ul>
<li>The first element</li>
<li>The second element</li>
<li>The third element</li>
</ul>
|
上面的代码会将项目符号点变成红色。由于我们只能在选定的几个元素上使用标记，因此我们也被限制在可以使用标记元素做的事情上。下面给出的列表将启发您与标记 CSS 伪元素一起使用的属性。
- 字体属性。
- 颜色属性。
- Direction、unicode-bidi 和 text-combine-upright 属性。
- 空白属性。
- 内容属性。
- 所有动画和过渡属性。
在 CSS level 3 规范中也引入了 marker 属性。如果您正在使用 CSS 级别 1 或 2（不推荐），此属性可能会给您带来一些麻烦。
CSS 选择伪元素选择器
CSS selection 伪元素选择器将样式应用于用户选择的目标元素的那部分。当内容太多而无法让用户在阅读时专注于几个单词时，它们是一个很好的候选者。因此，它成为我们 CSS 选择器备忘单列表的重要补充。以下代码将为选定的文本着色，以提高文本的可读性。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
p{
font-size: 30px;
}
p::selection{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<br><br>
<br><br>
<p>Your Text</p>
</body>
</html>
|
输出
上面的代码将选中的文本变为红色。如您所见，选择 CSS 伪元素选择器适用于文本；很少有属性可以支持这个选择器。可以与 selection CSS 伪元素一起使用的属性如下：
- 文本装饰属性。
- 文本阴影属性。
- 所有颜色属性，包括背景颜色。
- 描边颜色、填充颜色和描边宽度。
- 游标属性。
- 大纲属性。
在使用选择伪元素中的颜色时，请记住可访问性和 W3C 对比指南。由于许多设备都与互联网相关联，因此浏览器兼容性测试和维护结构良好的页面是一个附加组件。
将伪元素与 CSS 类相结合
CSS 中的伪元素也可以与类似于上面讨论的伪类的 CSS 类结合使用。这为开发人员提供了对元素的更多控制权和更多的灵活性。通过这种组合，您可以发挥所有创意并在网页上带来独特的设计。
下面的代码结合了一个伪元素和 CSS 类：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
p{
font-size: 30px;
}
p.my_class::first-line{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<br><br>
<br><br>
<p>Your Text</p>
<br><br>
<p class="my_class">Your Text</p>
</body>
</html>
|
输出
在上面的代码中，仅选择了具有定义类的“p”标签并将其涂成红色。
请注意，您还可以将多个伪元素目标用于同一个元素，例如首字母和第一行等。多个元素与伪元素一起使用。
CSS 属性选择器
接下来是我们的 CSS 选择器备忘单中的 CSS 属性选择器。Web 开发人员非常熟悉网页构建过程中使用的属性。属性帮助我们为 web 元素提供特定的说明并相应地塑造它们的工作。
属性还为我们提供了更多使用元素的选项，以及更多通过 JavaScript 或 CSS 处理这些元素的控制权。CSS 开发人员已经考虑过类似的组合，并将属性包含在他们的选择器库中。这些与属性一起工作的选择器称为 CSS 属性选择器，在本节中，我们将通过示例和演示来了解其中的一些。
使用 CSS 属性选择器的一般语法如下：
|
1
2
3
|
element [attribute] {
//styling
}
|
CSS [属性] 选择器
我们的 CSS 选择器列表中的第一个属性选择器是 CSS [attribute] 选择器。这是所有选择器中最简单的，只需要参数中的属性名称。将选择网页中包含此属性名称的所有元素以应用样式。
以下代码对具有“lang”属性的“p”元素执行 CSS 样式：
|
1
2
3
4
5
6
|
p[lang]{
color: red;
font-size: 20px;
}
<p lang = “en”>Your Text</p>
<p>Your Text</p>
|
在任何浏览器中运行上述代码，以查看两个“p”标签的样式差异。
CSS [属性 = 值] 选择器
开发人员还可以针对具有特定值的属性来缩小他们对元素的选择范围。其余一切都与 CSS [属性] 选择器相同。相同的语法如下：
|
1
2
3
4
|
element [attribute = “value”]
{
//styling
}
|
我们可以调整上面的代码以仅针对以“en”语言编写的段落。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
p[lang = "hi"]{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<br><br>
<br><br>
<p lang="en">Your Text</p>
<p lang = "hi">Your Text</p>
</body>
</html>
|
输出
正如预期的那样，仅选择了值为“hi”的属性“lang”，并对其应用了指定的样式。
CSS [属性 ~= “值”] 选择器
我们的 CSS 选择器备忘单中的下一个是 CSS [Attribute ~= “value”] 是对 CSS [Attribute = “Value”] 的增强，并增加了一点功能。如果元素在指定的属性中包含单词“value”，则 CSS [Attribute ~= “value”] 可以选择元素。例如，以下代码在属性“title”中查找值“shirt”。
|
1
2
3
4
5
6
7
8
9
|
<style>
p[title ~= "shirt"]{
color: red;
font-size: 20px;
}
</style>
<p title="blue shirt">Your Text</p>
<p title="red shirt">Your Text</p>
<p title="hoodie">Your Text</p>
|
上面的代码选择了前两段，因为它们的标题中有一件衬衫，这是目标属性。
CSS [属性 |= “值”] 选择器
CSS[attribute |= “value”] 选择器选择所有以单词“value”开头的属性值。以下代码演示了选择器：
|
1
2
3
4
5
6
7
8
9
|
<style>
p[title |= "shirt"]{
color: red;
font-size: 20px;
}
</style>
<p title="shirt-blue">Your Text</p>
<p title = "shirt-red">Your Text</p>
<p title = "hoodie">Your Text</p>
|
上面的代码将前两段涂成红色。请注意，CSS[attribute |= “value”] 选择器仅在值是属性中的单个单词（例如仅“shirt”）或连字符为“shirt-blue”时才起作用。CSS 不会选择中间的空白来进行样式设置。该值必须是一个单词。例如，以下代码将只选择中间段落：
|
1
2
3
|
<p title="shirt blue">Your Text</p>
<p title = "shirt-red">Your Text</p>
<p title = "hoodie">Your Text</p>
|
在你的 CSS 表中使用这个 CSS 选择器之前要小心。
CSS [属性 ^= “值”] 选择器
CSS[attribute |= “value”] 的缺点由 CSS[attribute ^= “value”] 选择器来弥补。使用此选择器，属性值不必是整个单词（单个或连字符）。任何以单词“value”开头的值都将被选作样式。以下代码演示了 CSS [attribute ^= “value”] 选择器的工作原理：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web Template</title>
<style>
p[title ^= "shirt"]{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<br><br>
<br><br>
<p title="shirt-blue">Your Text.</p>
<p title = "shirt red">Your Text.</p>
<p title = "hoodie">Your Text.</p>
</body>
</html>
|
输出
如上面的截图所示，前两段是红色的，尽管其中一个属性值是两个单词，但从单词“shirt”开始。
CSS [属性 $= “值”] 选择器
CSS[attribute $= “value”] 选择器与 CSS[attribute ^= “value”] 选择器正好相反。^ 属性选择器以单词“value”查找开头，而 $ 属性选择器查找以单词“value”结尾。以下代码演示了 CSS [attribute $= “value”] 选择器的工作原理：
|
1
2
3
4
5
6
7
8
9
|
<style>
p[title $= "shirt"]{
color: red;
font-size: 20px;
}
</style>
<p title="blue shirt">Your Text</p>
<p title = "shirt red">Your Text</p>
<p title = "hoodie">Your Text</p>
|
上面的代码将第一段着色为红色。请注意，CSS [attribute $= “value”] 选择器不要求单个或连字符的单词（一个单词）。选择具有多个属性的属性值，直到它们以单词“value”结尾。
CSS [属性 *= “值”] 选择器
CSS [attribute *= “value”] 选择器的工作方式类似于正则表达式检查器，它选择具有由“value”组成的值的目标属性的每个元素。该值不必是一个完整的单词。即使“值”是属性值的一部分，选择器仍然有效。
|
1
2
3
4
5
6
7
8
9
|
<style>
p[title *= "rt"]{
color: red;
font-size: 20px;
}
</style>
<p title="blue shirt">Your Text.</p>
<p title = "shirt red">Your Text</p>
<p title = "hoodie">Your Text</p>
|
上面的代码选择了前两段并将它们涂成红色。
CSS 属性选择器是我们的 CSS 选择器备忘单的重要组成部分，因为它们为开发人员提供了一种简单的方法来定位大量元素（通常是输入元素）并根据属性对其进行样式设置。CSS 属性选择器的另一个重要用例是在使用表单和其他基于输入的元素时。它们也可以使用类、ID 或选择器进行组合，如伪元素和伪类中所示。这对你来说可能是一个很好的锻炼。
结论
CSS 选择器是规范的重要组成部分，每次发布都会增加许多新内容。它不仅减少了 HTML 文件中的冗余代码，而且还提高了效率，帮助我们更自由地对网页进行样式化。
虽然所有高级 CSS 选择器都提供了很高的跨浏览器兼容性，但开发人员始终需要执行浏览器兼容性测试以确保不会出现浏览器兼容性问题。在测试 CSS 选择器实现时，LambdaTest 可以成为首选选项。您可以跨 3000 多种浏览器和操作系统组合对您的网站和 Web 应用程序执行一次浏览器兼容性测试。
我希望这份 CSS 选择器备忘单可以帮助您在职业生涯中取得进步，如果有任何建议，请随时发表评论，以帮助我们完善这篇文章。
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
