CSS选择器：让样式精确命中目标

在网页开发中，CSS选择器是一种强大的工具，它可以帮助我们精确地定位HTML元素，以便为它们应用样式。在这篇博客中，我们将探讨一些常见的CSS选择器，了解它们的功能和使用方法。

一、元素选择器

元素选择器是最基本的选择器类型，它根据HTML元素的类型来选择元素。例如，p选择器会选择页面上的所有<p>元素。这种选择器非常简单，但有时候可能会选择到过多的元素，导致样式应用不够精确。

css 复制代码

p {
  color: red;
}

在这个例子中，所有<p>元素的文本颜色将被设置为红色。

二、类选择器

类选择器通过类名来选择元素。在HTML中，我们可以使用class属性为元素指定一个或多个类名。然后，在CSS中，使用.加上类名来定义该类元素的样式。例如，.my-class选择器会选择所有带有class="my-class"的元素。类选择器非常灵活，可以让我们在多个元素之间共享样式，同时避免选择到不需要的元素。

css 复制代码

.my-class {
  font-size: 20px;
}

在这个例子中，所有带有class="my-class"的元素的字体大小将被设置为20像素。

三、ID选择器

ID选择器通过元素的ID来选择元素。在HTML中，每个元素的ID应该是唯一的。在CSS中，使用#加上ID名来定义该元素的样式。例如，#my-id选择器会选择ID为my-id的元素。由于ID选择器的唯一性，它通常用于定位页面上的特定元素，如导航栏、页脚等。

css 复制代码

#my-id {
  background-color: yellow;
}

在这个例子中，ID为my-id的元素的背景颜色将被设置为黄色。

四、属性选择器

属性选择器根据元素的属性来选择元素。例如，[attr=value]选择器会选择所有属性为attr且值为value的元素。属性选择器非常灵活，可以根据元素的特定属性来应用样式。例如，我们可以使用属性选择器来选择所有带有target="_blank"的<a>元素，并为它们添加特定的样式。

css 复制代码

input[type="text"] {
  border: 1px solid black;
}

在这个例子中，所有类型为text的<input>元素将有一个黑色的1像素边框。

五、伪类选择器和伪元素选择器

伪类选择器和伪元素选择器是两种特殊的选择器类型，它们可以选择HTML元素的特定状态或部分。伪类选择器用于选择元素在特定状态下的样式，如:hover选择器用于选择鼠标悬停在元素上时的样式。伪元素选择器则用于选择元素的特定部分，如::before和::after选择器用于在元素内容的前后插入内容。

css 复制代码

a:hover {
  color: green;
}

在这个例子中，当鼠标悬停在<a>元素上时，链接的颜色将变为绿色。

六、组合选择器

我们还可以使用组合选择器来选择符合多个条件的元素。例如，element.class选择器会选择所有带有指定类名的指定类型元素；element, element选择器会选择多个类型的元素；element element选择器会选择后代元素；element > element选择器会选择子元素；element + element选择器会选择相邻兄弟元素；element ~ element选择器会选择所有后面的兄弟元素。

css 复制代码

p::first-letter {
  font-size: 30px;
}

在这个例子中，每个<p>元素的第一个字母的字体大小将被设置为30像素。

七、通配符选择器

通配符选择器用星号（*）表示，它选择页面上的所有元素。虽然这个选择器在大型项目中可能会导致性能问题（因为它会选择页面上的每一个元素），但在某些特定场景下，比如全局样式重置时，它是非常有用的。

css 复制代码

div p {
  color: blue;
}

在这个例子中，所有在<div>元素内部的<p>元素的文本颜色将被设置为蓝色。

八、子代选择器

子代选择器使用 > 符号，它选择直接的子元素，而不是所有后代元素。例如，div > p 选择器会选择所有直接作为 div 元素子元素的 p 元素，而不会选择 div 元素内部更深层次的 p 元素。

css 复制代码

ul > li {
  list-style-type: none;
}

在这个例子中，所有直接作为<ul>元素子元素的<li>元素将不会有列表标记。

九、相邻兄弟选择器

相邻兄弟选择器使用 + 符号，它选择紧接在另一个元素后的第一个兄弟元素。例如，div + p 选择器会选择所有紧接在 div 元素后的 p 元素。

css 复制代码

h1 + p {
  margin-top: 50px;
}

在这个例子中，所有紧邻在<h1>元素后面的<p>元素的上边距将被设置为50像素。

十、一般兄弟选择器

一般兄弟选择器使用 ~ 符号，它选择另一个元素之后的所有兄弟元素。例如，div ~ p 选择器会选择所有在 div 元素之后的 p 元素。

css 复制代码

* {
  box-sizing: border-box;
}

在这个例子中，页面上的所有元素都将使用border-box作为盒模型。

十一、否定伪类选择器

否定伪类选择器使用 :not() 函数，它允许你选择除了特定元素之外的所有元素。例如，p:not(.my-class) 选择器会选择所有没有 my-class 类的 p 元素。

css 复制代码

p:not(.intro) {
  font-weight: normal;
}

在这个例子中，所有不带.intro类的<p>元素将使用正常字体重量。带有.intro类的<p>元素将不受影响。

十二、结构性伪类选择器

结构性伪类选择器允许你根据元素在文档树中的位置来选择元素。例如，:first-child 选择器会选择每个元素的第一个子元素，:last-child 选择器会选择每个元素的最后一个子元素，:nth-child(n) 选择器会选择每个元素的第 n 个子元素。

此外，还有 :first-of-type、:last-of-type、:nth-of-type(n)、:only-child、:only-of-type 等结构性伪类选择器，它们提供了更精细的元素选择方式。

css 复制代码

/* 选择第一个li元素 */
ul li:first-child {
  color: purple;
}

/* 选择最后一个li元素 */
ul li:last-child {
  color: orange;
}

/* 选择第三个li元素 */
ul li:nth-child(3) {
  color: pink;
}

/* 选择偶数li元素 */
ul li:nth-child(even) {
  background-color: lightgray;
}

/* 选择类型为li的第一个子元素 */
ul li:first-of-type {
  font-weight: bold;
}

十三、属性选择器进阶

除了基本的属性选择器 [attr=value] 之外，还有更多复杂的属性选择器可以使用。例如，[attr^=value] 选择器会选择属性值以特定字符串开头的元素，[attr$=value] 选择器会选择属性值以特定字符串结尾的元素，[attr*=value] 选择器会选择属性值中包含特定字符串的元素。这些选择器提供了更强大的属性匹配功能。

css 复制代码

/* 重置所有元素的边距和填充 */
* {
  margin: 0;
  padding: 0;
}

在这个例子中，通配符选择器*用于选择页面上的所有元素，并将它们的边距和填充重置为0。

十四、伪元素选择器进阶

除了 ::before 和 ::after 之外，还有其他一些有用的伪元素选择器。例如，::first-letter 选择器会选择元素内容的第一个字母，::first-line 选择器会选择元素内容的第一行，::selection 选择器会选择用户选择（高亮）的元素部分。这些选择器允许你对元素的特定部分应用样式。

在HTML中，一个元素可以有多个类名，用空格分隔。CSS选择器可以针对这些多类名进行匹配：

html 复制代码

<div class="box featured">This is a featured box.</div>

css 复制代码

.box.featured {
  border: 3px solid red;
}

在这个例子中，选择器.box.featured选择了同时具有box和featured两个类的<div>元素，并为其添加了红色边框。