CSS选择器参考手册：深入解析网页元素定位

CSS选择器简介

CSS选择器是用来选择和操作HTML元素的强大工具。它们提供了精确控制网页外观和行为的精细方法。CSS选择器基于以下基本原则：

• 通配选择器（*） 匹配任何类型的HTML元素。
• 类选择器（.className） 匹配具有指定类名的元素。
• ID选择器（#idName） 匹配具有指定ID的唯一元素。
• 子代选择器（parent > child） 匹配位于父元素内的子元素。
• 伪类选择器（:pseudo-class） 匹配满足特定条件的元素，例如：hover、active、checked。
• 伪元素选择器（::pseudo-element） 匹配文档树中不存在的元素，例如：::before、::after。
• 组合选择器（selector1 selector2） 匹配同时满足多个选择器的元素。

通配选择器 (*)

通配选择器是一个星号（*），它可以匹配任何类型的HTML元素。这是最通用的选择器，经常用于影响页面上的所有元素。

例如：

* {
  color: red;
}

类选择器（.className）

类选择器用于匹配具有指定类名的元素。类名是附加到HTML元素的特殊属性，用于对元素进行分组和应用样式。

例如：

<p class="warning">警告信息</p>

.warning {
  color: yellow;
}

ID选择器（#idName）

ID选择器用于匹配具有指定ID的元素。ID是HTML元素的唯一标识符，用于明确识别特定元素。

例如：

<div id="main-content">主要内容</div>

#main-content {
  width: 80%;
  margin: 0 auto;
}

子代选择器（parent > child）

子代选择器用于匹配位于父元素内的子元素。父元素和子元素之间必须是直接的父子关系，中间不能有其他元素。

例如：

<div class="container">
  <p>段落文本</p>
</div>

.container > p {
  font-size: 1.2rem;
}

伪类选择器（:pseudo-class）

伪类选择器用于匹配满足特定条件的元素，例如：悬停、激活、选中。伪类选择器用冒号（:）开头。

常见的伪类选择器：

• :hover ：当鼠标悬停在元素上时匹配。
• :active ：当元素被激活（如单击）时匹配。
• :checked ：当复选框或单选按钮被选中时匹配。

例如：

a:hover {
  color: blue;
}

伪元素选择器（::pseudo-element）

伪元素选择器用于匹配文档树中不存在的元素，例如：::before、::after。伪元素选择器用两个冒号（::）开头。

常见的伪元素选择器：

• ::before ：在元素的内容之前插入内容。
• ::after ：在元素的内容之后插入内容。

例如：

p::before {
  content: "提示：";
  font-weight: bold;
}

组合选择器（selector1 selector2）

组合选择器用于匹配同时满足多个选择器的元素。组合选择器使用空格分隔。

例如：

.container .warning {
  background-color: yellow;
}

这个选择器将匹配同时具有类名“container”和“warning”的元素。

结语

CSS选择器是Web开发人员必备的强大工具。通过理解和熟练运用通配选择器、类选择器、ID选择器、子代选择器、伪类选择器、伪元素选择器和组合选择器，您可以精确控制网页元素的定位，创建具有吸引力和功能性的网站。