CSS3选择器指南：深入理解兄弟选择器、结构伪类选择器和伪元素选择器

2022-12-23 05:46:21

CSS3 选择器：解锁样式魔法

引言

CSS3 选择器是 CSS（层叠样式表）语言中的一把强大利剑，它赋予您精准选择和样式化 HTML 元素的能力。从兄弟选择器到属性选择器，这些选择器提供了多种方式来实现复杂的样式效果，让您的 Web 页面脱颖而出。

兄弟选择器：纵横交错的元素亲密关系

兄弟选择器让您能够根据元素与其兄弟元素的关系进行选择。相邻兄弟选择器（+）只选择紧邻在目标元素之后的第一个兄弟元素，而通用兄弟选择器（~）则选择目标元素的所有兄弟元素。

/* 示例：选择第 2 个 li 元素并将其颜色设置为红色 */
.list li:nth-child(2) {
  color: red;
}

/* 示例：选择第 4 个 li 元素并将其颜色设置为红色 */
.list li:nth-child(4) {
  color: red;
}

结构伪类选择器：位置为王的元素定位

结构伪类选择器根据元素在文档中的位置进行选择。其中最常见的包括：first-child、last-child、nth-child 和 nth-of-type。这些选择器让您能够轻松选择第一个元素、最后一个元素、第 N 个元素，或特定类型元素中的第 N 个元素。

/* 示例：选择除第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外的所有 h3 元素 */
h3 ~ h3 {
  color: blue;
}

伪元素选择器：虚实相间的元素魔术

伪元素选择器允许您选择 HTML 中不存在的元素的特定部分。最常见的伪元素选择器是 ::before 和 ::after。这些选择器让您能够在元素之前或之后插入内容，或在元素周围添加装饰。

/* 示例：在每个 li 元素之前插入一个红色的点 */
li::before {
  content: "●";
  color: red;
  margin-right: 5px;
}

属性选择器：精准靶向的元素识别

属性选择器根据元素的属性进行选择。其中最常见的包括：[attr]、[attr=value] 和 [attr^=value]。这些选择器让您能够选择具有特定属性、属性值等于特定值，或属性值以特定值开头的元素。

/* 示例：选择具有 class 属性的元素 */
[class] {
  background-color: #ccc;
}

/* 示例：选择具有 id 属性且等于 "header" 的元素 */
[id="header"] {
  color: white;
}

/* 示例：选择具有 class 属性且以 "btn-" 开头的元素 */
[class^="btn-"] {
  border-radius: 5px;
}