原文： CSS Selector Types – How to Select Elements to Style in CSS
当你想用 CSS 给一个元素添加样式时，你首先要“选择”它。在这篇文章中，我将向你展示七种方法。
以下是在 CSS 中为元素设置样式的语法：
selector {
/* 在这里设置样式 */
}
你有一个选择器，“瞄准”你想为其设计样式的元素，然后你有一个开放的大括号。大括号之后的样式使用不同的 CSS 属性，然后你用一个闭合的大括号来关闭它。
有许多方法来定位元素。你可以把这些方法称为选择器类型。
如果你喜欢视频的话，这里有一个关于在 CSS 中选择元素样式的方法的视频。
下面是 CSS 中的七种选择器类型。
如何在 CSS 中使用通用选择器（*）
通用选择器，即星号（*），允许你选择任何类型的所有元素进行样式设计。下面是一个例子：
* {
border: 1px solid black;
}
比方说，我们对下面的 HTML 使用这种样式：
<body>
<h1>CSS styles</h1>
<p>How to apply styles</p>
<div>
<img width="20px" height="20px" src="https://www.freecodecamp.org/news/content/images/size/w150/2022/03/deee.jpg" />
</div>
</body>
结果如下：
你可以看到 body、h1、p、div 和 img 元素的 border 都是 1px solid black，因为我们使用了通用选择器。
如何在 CSS 中通过标签名称为元素设置样式
你也可以通过使用标签名称来选择元素为其设置样式。下面是一个例子：
p {
color: red;
}
img {
width: 100px;
height: 100px;
}
这些样式声明对所有 p 元素应用 color 为红色（red），对所有 img 元素应用 200px 的宽度（width）和高度（height）。
这是上面的样式如何在这个 HTML 中实现：
<span>I am a span</span>
<p>There is a span above me</p>
<img src="https://www.freecodecamp.org/news/content/images/size/w150/2022/03/deee.jpg" />
结果：
你可以看到 span 没有被设置样式，只有 img 和 p 被设置了样式。
如何为 CSS 中的类设置样式
元素接受不同的属性，包括类。你可以根据你在一个元素上指定的类来定位该元素。下面是一个例子：
<div class="container">
<h2>Hello</h2>
</div>
<div>
<h2>How are you</h2>
</div>
这里有两个 div，但只有一个具有 container 类的属性。你可以用句号（.）加上类来设置样式，像这样：
div {
border: 1px solid purple;
}
.container {
border-width: 20px;
}
结果如下：
从 CSS 中，我们指定所有的 div 元素都应该有一个 border 为 1px solid purple。但是对于有 container class 的元素，你可以从结果中看到它的 border-width 是 20px。
如何在 CSS 中为 Id 设置样式
与 class 属性类似，你可以在一个元素上指定一个 id，你可以在 CSS 中对其进行样式设置。
下面是一个例子：
<div class="container">
<h2>Hello</h2>
</div>
<div id="container">
<h2>How are you</h2>
</div>
你可以通过使用哈希（#）加上 id 来定位 id 元素，像这样：
#container {
border-left: 10px solid blue;
}
结果如下：
使用具有 container id 的元素（无论是 div、p 还是任何类型），我们只对第二个 div 元素应用样式。
然而，与类不同，id 必须是唯一的。两个或更多的元素不能有相同的 id，因为这将导致意外的行为。
如何给 CSS 中的其他属性设置样式
我们已经看到了如何选择 class 和 id 属性。如果你想选择其他属性呢？你可以使用方括号（[attr]）。应该怎么做呢？
让我们看一个例子：
<a href="#">
Some link
</a>
<p href="https://google.com">
A paragraph link
</p>
在这个例子中，我们有两个元素：一个 a 标签和一个 p 标签。要为这两个元素设计样式，你可以直接使用它们的标签名：
p, a {
color: red;
}
逗号允许你一次对多个选择器应用样式。
但另一种可以为这两个元素设置样式的方法是使用它们的属性。它们都有一个 href 属性。
请记住，p 标签中不支持 href 属性，我只是用它来说明一个例子。
下面是你如何使用 href 属性为这两个元素设置样式：
[href] {
color: red;
}
这个 CSS 将匹配所有带有 href 属性的元素。
下面是结果：
这两个元素都有 href 属性，所以它们都被选中设置样式。在这里，我们使用了没有值的 href 属性。你也可以指定一个值来具体说明你的目标，就像这样：
[href="#"] {
color: red;
}
结果是这样的：
只有 a 标签有带 # 值的 href 属性，所以这是唯一符合我们的样式的元素，你可以从上面的图片中看到。
如何在 CSS 中使用伪类
伪类是一种选择器类型，它允许你在特定的状态下选择元素。仅举几个例子，以下是一些支持的状态：
hover（当鼠标浮在一个元素上时）disabled（当一个元素如输入或按钮被禁用时）required（当一个表单元素是必需时）
还有很多，你可以在伪类 MDN 文档中找到。
你可以在元素处于这些状态时应用样式。你可以通过使用冒号（:）跟在状态后面来选择状态。下面是一个例子：
<!DOCTYPE html>
<button>
Hover me
</button>
<!DOCTYPE html> 一行是很重要的，它指定了它是 HTML5，所以伪类可以生效。
这里是 CSS：
:hover {
background-color: black;
color: white;
}
这个 CSS 将把这些样式应用到你悬停的任何元素上，结果如下：
左边的图片是没有悬停状态的。在右边，你可以看到应用在 body 和 button 上的样式，因为我们正在它们上面悬停。
通过悬停在 button 上，你也在悬停在 body 上，因为 button 是 body 的一个子节点。
如何使用 CSS 中的伪元素选择器
伪元素（不同于伪类）是用来选择“一个元素的特定部分”的。不是整个元素——只是一个部分。你也可以用它们来为一个现有的元素添加伪（人造）元素。
这里有一篇关于 CSS 中的伪元素与伪类的详细文章。
下面是一些支持的伪元素选择器：
selection：一个元素的高亮部分first-line：一个段落的第一行placeholder：一个输入元素的占位符文本
还有很多，你可以在 MDN 的伪元素文档中找到。
要使用伪元素选择器来应用样式，你可以使用双冒号（::）加上伪元素。下面是一个例子：
<!DOCTYPE html>
<input placeholder="Enter some text" />
下面是这个 HTML 的 CSS：
input {
color: blue;
}
::placeholder {
color: red;
font-style: italic;
}
::placeholder 伪元素选择器为所有表单元素的“占位符部分”设置样式。正如你在上面的例子中看到的，input 元素本身的 color 样式是 blue，但占位符部分的样式不同。
总结
在这篇文章中，我已经向你展示了七种方法，你可以为你选择的元素设计样式。我们看到了：
- 通用选择器，用于选择所有元素
- 标签名称，用于选择符合标签名称的元素
- 类，用于选择带有类属性的元素
- id 用于选择有 id 属性的元素
- 属性用于选择有或没有指定值的属性的元素
- 伪类用于选择特定状态下的元素
- 伪元素用于选择元素的特定部分
你也可以把这些选择器结合起来，使你想定位的元素更加具体。你可以使用组合器（Combinators）来实现这一点。
组合器允许你使用多个选择器，根据符合选择器的元素之间的关系来定位元素。如果你想了解更多，这里有一篇我写的关于组合器的文章。
给你一个快速预览——组合器是在多个选择器类型之间使用的，它们允许你根据元素与其他元素的关系来设计样式。
谢谢你阅读本文！