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

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

（）

一、元素选择器

元素选择器是最基本的选择器类型，它根据HTML元素的类型来选择元素。例如，p选择器会选择页面上的所有

元素。这种选择器非常简单，但有时候可能会选择到过多的元素，导致样式应用不够精确。

p {  color: red;}

在这个例子中，所有

元素的文本颜色将被设置为红色。

（）

二、类选择器

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

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

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

三、ID选择器

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

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

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

四、属性选择器

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

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

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

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

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

a:hover {  color: green;}

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

六、组合选择器

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

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

在这个例子中，每个

元素的第一个字母的字体大小将被设置为30像素。

七、通配符选择器

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

p p {  color: blue;}

在这个例子中，所有在元素内部的

元素的文本颜色将被设置为蓝色。

八、子代选择器

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

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

在这个例子中，所有直接作为

元素子元素的
• 元素将不会有列表标记。

  九、相邻兄弟选择器

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

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

  在这个例子中，所有紧邻在

  元素后面的

  元素的上边距将被设置为50像素。

  十、一般兄弟选择器

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

  * {  box-sizing: border-box;}

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

  十一、否定伪类选择器

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

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

  在这个例子中，所有不带.intro类的

  元素将使用正常字体重量。带有.intro类的

  元素将不受影响。

  十二、结构性伪类选择器

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

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

  /* 选择第一个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] 选择器会选择属性值中包含特定字符串的元素。这些选择器提供了更强大的属性匹配功能。

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

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

  十四、伪元素选择器进阶

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

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

  This is a featured box.

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

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