CSS选择器是是CSS最重要的部分之一。它们使你能够在网页上针对你想要的HTML元素设置样式。

如果没有CSS选择器，你就无法将页面设置成你想要的样子。

值得庆幸的是，CSS选择器已经存在一段时间了，你可以随心所欲地对你的元素进行样式设计。

但如果你真的想要释放CSS的力量并创建令人惊叹的元素，那么你需要了解你能用CSS选择器做什么。也就是说，你需要先了解基本的CSS选择器，然后再学习高级的CSS选择器。

这篇文章将对这两方面进行研究。到最后，你会发现，你已经开始释放CSS选择器的力量并创造自己的不可思议的元素。所以，让我们从什么是CSS选择器开始吧。

什么是CSS选择器？

如果你之前写过任何CSS，那么你可能已经见过CSS选择器了。它们是CSS规则的第一部分，你可以使用CSS选择器来选择你要设置样式的HTML元素。

在CSS里，选择器由CSS选择器规范来定义。这意味着某个选择器必须是相应的浏览器支持的，这个选择器才能运行。

CSS选择器通常分为五个不同的种类。这篇文章将从基础和高级两个关键类别来研究它们。以下是这五个类别。

  1. 简单选择器
  2. 组合选择器
  3. 伪类选择器
  4. 伪元素选择器
  5. 属性选择器

想要做好一件事，你必须了解基础知识，所以让我们从这里开始。

基础选择器

你可能见过许多类型的选择器 - 这些基本的CSS选择器足以让你构建时尚的网页。让我们来看看每个基本的CSS选择器，以确保我们了解它们的作用。

CSS 元素（标签）选择器

CSS元素选择器根据元素名来选择HTML元素。在HTML中，元素名就是类似于h1、 p的东西，或者类似于article或footer之类有意义的名字。因此，元素选择器选择所有具有你指定的名称的HTML元素。

让我们来看看元素选择器的例子吧：

/* selecting all h3 elements */
h3 {
 text-align: center;
 color: blue;
}

/* selecting all article elements */
article {
 font-size: 14px;
 line-height: 1.1px;
}

在以上的例子，我们选择器页面上标签名为h3和article的所有元素，并对这些元素应用了样式。

元素选择器帮助你保持代码的简洁，并将样式应用页面上这种类型的所有元素上。

CSS ID 选择器

ID选择器选择具有匹配的ID属性的HTML元素。由于在一个HTML文档中不能有一个以上具有相同ID的元素，这个选择器允许你选择一个单独的元素。这意味着所选元素将是唯一的。

要选择一个具有特定ID的元素，你可以使用#（哈希）字符，后面跟着是HTML元素的ID。在这种情况下它看起来就像这样#id-name。

让我们来看看ID选择器的例子吧。

#projects-flex-container {
 width: 90vw;
 display: flex;
}

在上面这个例子里，我们选择了ID为#projects-flex-container的单个元素，并对其应用了样式。这个样式只适用于那些单独的元素。

不过，有一点需要注意的是，在使用ID选择器时，你应该小心。由于ID选择器不能在其他元素上重复使用，你应该问你自己是否需要使用ID选择器来选择该元素。

CSS 类选择器

类选择器选择具有相同的class属性的HTML元素。类选择器对于定位多个元素很有用，比如你想要匹配样式的卡片或图像。

要选择具有特定类别的元素，你可以使用一个.字符（句号），然后在它后面加上类别的名称。

让我们来看看CSS类选择器的例子。

.project-card {
 color: #badA55;
 padding: 5px;
 border-radius: 5px;
}

上述的例子中，我们使用CSS类选择器选择了类名为project-card的所有元素。所有具有project-card类的元素将被应用列出的样式。

通用选择器

通用选择器用来选择所有的HTML元素，这意味者你页面上的每一个元素，从标题到页脚。你会经常使用它来页面的边距和填充保持一致，或者重置样式。

通用选择器的语法是*字符（星号）。

* {
 margin: 0;
 padding: 0;
}

上述的例子中，通过使用通用选择器，它将整个页面的margin和padding清零。

什么是CSS分組选择器

在我们讨论高级CSS选择器之前，我们需要快速了解一下分組选择器。这是一种常见的做法，你会在外面经常看到，它有助于使你的代码干净和可读。

分组允许你一次选择多个HTML元素，并且只声明一次它们的样式。

让我们来看看组合选择器的例子吧。

h1 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

h2 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

h3 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

上面的CSS代码中，我们有三个元素h1、h2和h3，这三个元素都有相同的样式定义。因此，我们可以通过选择器分组来清理我们的代码。

为了给选择器分组，我们用,字符（逗号）将每个选择器分开。

h1, h2, h3 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

因为它们的样式是一样的，我们现在只需要写一次。

请注意，分組选择器可用于本文中所提及的所有选择器，也就是说，选择器不一定是要和上述代码一样的，也可以是其他的。

如果我们想让它们共享样式定义，我们可以把一个类选择器和一个ID选择器分组。而我们可以把匹配的样式属性和值分组，然后在每个元素上设置不同的定义。

让我们拓展我们的例子来理解这个概念。

/*group the selectors and state definitions that are the same*/

h1, h2, h3 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

/*apply individual styles to selectors*/

h1 {
 font-size: 72px;
}

h2 {
 font-size: 48px;
}

h3 {
 font-size: 32px;
}

这就是所有的基本选择器，如果你想学好CSS，你需要了解每个选择器的作用。有了这些知识，你现在应该可以做到这一点了。

如果你想提高你的CSS水平，那么你将要了解高级的CSS选择器。

高级CSS选择器

高级CSS选择器允许你突破CSS的界限，它们可以高度具体地确定你要选择哪些元素，以及选择该元素时它处于什么状态。

让我们直接进入一些高级选择器，看看属性选择器。

CSS属性选择器

属性选择器允许你根据某个属性是否存在来选择元素。换句话来说，这个CSS选择器将匹配页面上的任何元素，如果它有某个属性的话。

属性是添加到HTML元素开始标签中的内容，它可以是id、name或value等内容。

<a title="Learn to code for free!" href="https://www.freecodecamp.org/">Learn to code</a>

title是a元素中的一个属性。

有七个属性选择器，它们分别允许你根据一个属性是否存在以及值可能包含的内容来查找元素。

  1. 当前选择器
  2. 等于选择器（=）
  3. 以指定值开头选择器（^）
  4. 以指定值结尾选择器（$）
  5. 包含选择器（*）
  6. 空白选择器（~）
  7. 连字符选择器（|）

这些选择器的通用语法是选择器后跟[]（方括号），你可以在里面说明要查找的内容。选择器可以是类选择器，甚至是通用选择器。

selector[attribute]

今天我们将看看五个最常用的属性选择器，为了了解这五个属性选择器，让我们用例子来看看它们中的每一个。

当前属性选择器

这个属性选择器根据元素是否存在该属性来查找任何元素。

让我们来看看当前属性选择器的例子吧。

a[title] {
 color: khaki;
 background: grey; 
}

在上述的例子中，我们的当前属性选择器查找了任何包含title属性的a元素，并对它们应用样式。其他所有没有包含title属性的a元素则不会应用这些样式。

等于属性选择器

这个属性选择器可以找到一个完全匹配属性值的元素。要使用这个选择器，你要在属性名后跟一个=（等号）来寻找完全匹配的值。

让我们来看看等于选择器的例子吧。

a[href="<https://peterlunch.com/>"] {
 color: purple;
}

在上述的例子中，等于选择器选择了所有a元素中有href属性且值为 "https://peterlunch.com/" 的元素。

以指定值开头选择器

这个属性选择器查找指定属性中以你指定的值开头的元素。要使用这个选择器，请先说明你要查找的属性，紧接着跟一个 ^ 和 = 符号，然后是你要匹配的值。

让我们来看看以指定值开头选择器的例子吧。

a[href^="https"] {
 color: yellow;
 text-decoration: none;
}

上述这个例子中，以指定值开头选择器查找了任何有href属性且值为“https”开头的a元素。

以指定值结尾的属性选择器

与以指定值开头选择器非常相似，这个属性选择器正好相反，它可以找到任何已你指定的值结束的元素。

要使用这个属性选择器，请先说明你要查找的属性，紧接着一个 $ 和 = 符号，然后是你要匹配的值。

让我们来看看以指定值结束选择器的例子吧。

img[src$="/blog-imgs"] {
 border-radius: 4px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

在上述的例子中，以指定值结束选择器查找了任何有src属性且以"/blog-imgs"结束的img元素。这是我实际用于我的网站中的一个。

包含属性选择器

这个属性选择器查找任何属性值某处包含你要找的值的元素。这意味着该值至少包含一个出现的值。

要使用这个选择器，请先说明你要查找的元素，紧接着一个 * 和 = 符号，然后是你要找的一个出现的值。

让我们来看看包含属性选择器的例子吧。

a[href*="peterlunch"] {
 color: green;
}

在上述的例子中，包含属性选择器查找了任意href属性中包含"peterlunch"的值的a元素。

属性选择器就到此为止，让我们进入下一个高级选择器。

组合选择器

下一个高级选择器是组合选择器。这个选择器可以结合一个或以上的CSS选择器。在CSS中，有四种类型的组合选择器。

  1. 后代选择器
  2. 直接子代选择器
  3. 相邻兄弟选择器
  4. 通用兄弟选择器

要理解这些选择器如何工作，你必须首先理解HTML遵循一个家族树的层级结构。这意味着有一个父元素，它可以包含子元素，而子元素可以有子元素。以此类推，就像一颗家庭树。

<div> <!--parent-->
 <p> <!--div child-->
 <article> <!--div child, parent to h1 & p-->  
  <h1>
   <p></p>
  </h1>
 </article>
 <article> 
  <h1>
   <p></p>
   <p></p>
  </h1>
 </article>
</div>

在上述的例子中，div是父元素，它的子元素是article，而article是h1和p子元素的父元素。

有了这些知识铺垫，让我们通过实践逐一探讨这些组合选择器，以了解它们的工作原理。

后代选择器

后代选择器匹配所有指定元素的后代的所有元素

让我们来看看后代选择器的例子吧。

div p {
 line-height: 2em;
}

上述的例子中选择了div元素里的所有p元素。

直接后代选择器

直接后代选择器匹配指定的元素的后代的所有元素。这与后代选择器不同，因为它只选择副元素的直接子元素。

子选择器用>字符来表示。

让我们来看看直接后代选择器的例子吧。

div > p {
 color: aquamarine;
}

参照上面的HTML层级结构的例子，这个选择器将将只找到第一个p标签，而不是article标签中的p标签，因为它们不是父元素div的直接子元素。

相邻兄弟选择器

相邻兄弟选择器用+来表示，它将两个选择器分开，只有在第二个选择器元素紧跟随第一个元素时才与之匹配。

一个很好的现实例子是，将紧跟在图片后面的文本设置为标题样式。

img + p {
 font-size: 10px;
 color: grey;
 font-style: italic;
}

在上述的例子中，img元素后面的任何p元素都将使用上述定义来进行样式处理。

通用兄弟选择器

通用兄弟选择器选择某一元素的任意兄弟元素，通用兄弟选择器使用~字符来表示。

让我们来看看通用兄弟选择器的例子吧。

article ~ h1 {
 font-weight: 900;
}

在上述例子中，它选择了所有h1元素，这些元素是article元素的同级别的。

伪选择器

伪选择器可分为两类。第一个是伪类选择器，第二个是伪元素选择器。

这些选择器很复杂，有很多选项。为了理解它们，值得单独阅读一些关于它们的文章，因为它们本身就是复杂的主题。但是，我在这里简要的介绍一下两者。

首先，伪类选择器根据某种状态选择元素。你可能已经见过:hover或:active这样的东西，这些是页面上的元素的状态。你可以根据该元素是否处于指定的状态来选择元素。

一个简单的例子是：

button:hover {
 background: red;
}

在上述的例子中，当用户在一个按钮上悬停时，背景颜色将会变为红色。

如果你想要更好的理解伪类选择器，我推荐你阅读Nash Vail的这篇文章，他对伪类的解释非常好。

接下来是我在这篇文章中写过的伪元素选择器。这些选择器选择元素中的一部分，一个元素中的一部分可能是元素的第一个字母或者是该元素前后的内容。

对于伪类选择器，值得注意的是它们像伪类一样使用 ::（双冒号）与:单冒号。

p {
  width: 600px;
  line-height: 1.5;
  font-weight: 500;
}

p::first-letter {
  color: white;
  background-color: rgb(55, 97, 117);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(212, 173, 81);
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

总结

现在你应该对CSS选择器有了很好的理解，以及如何使用它们来查找网页上的HTML元素。

希望你喜欢阅读这篇文章。如果你在这篇文章中学到了什么，那么请查看我的其他文章或订阅我的频道以获得非常好的新手教程。

原文：How to Use CSS Selectors to Style Your Web Page，作者：Peter Lynch