深入理解 CSS 选择器:从基础到高级

CSS(层叠样式表)是网页设计中不可或缺的一部分,它通过选择器来定位 HTML 文档中的元素,并为这些元素定义样式。掌握 CSS 选择器是前端开发的核心技能之一。本文将从最基础的选择器讲起,逐步深入到高级、复杂的结构和伪类/伪元素选择器,帮助你全面掌握 CSS 选择器的使用。

一、什么是 CSS 选择器?

CSS 选择器是一种模式,用于匹配文档树中的一个或多个元素。通过选择器,你可以精确地控制哪些 HTML 元素应该应用特定的样式规则。

例如:

css 复制代码
p {
  color: red;
}

这里的 p 就是一个选择器,表示选中文档中所有的 <p> 标签并为其设置红色字体颜色。

二、基础选择器

1. 元素选择器

根据标签名选择元素。

css 复制代码
div {
  width: 100%;
}

2. 类选择器

. 开头,选择具有指定 class 的所有元素。

html 复制代码
<div class="highlight">高亮文字</div>
css 复制代码
.highlight {
  background-color: yellow;
}

注意:一个元素可以有多个 class,如 class="highlight important"

3. ID 选择器

# 开头,选择具有指定 id 的唯一元素。

html 复制代码
<div id="main-content">主内容区</div>
css 复制代码
#main-content {
  font-size: 18px;
}

⚠️ 注意:id 是唯一的,不要重复使用同一个 id。

4. 通用选择器

使用 * 匹配所有元素,常用于重置默认样式。

css 复制代码
* {
  margin: 0;
  padding: 0;
}

三、组合选择器

1. 群组选择器

用逗号 , 分隔多个选择器,表示"或"的关系。

css 复制代码
h1, h2, h3 {
  color: #333;
}

2. 后代选择器

空格分隔两个选择器,表示选择某元素的后代元素。

css 复制代码
div p {
  line-height: 1.5;
}

上例表示选择 <div> 中的所有 <p> 元素,不管嵌套多深。

3. 子元素选择器

使用 > 表示只选择直接子元素。

css 复制代码
ul > li {
  list-style: square;
}

ul li 不同,这个只会匹配 <ul> 下一级的 <li>,不会匹配嵌套 <ul> 中的 <li>

4. 相邻兄弟选择器

使用 + 选择紧跟在某个元素之后的兄弟元素。

css 复制代码
h2 + p {
  margin-top: 0;
}

只匹配紧接在 <h2> 后面的第一个 <p>

5. 一般兄弟选择器

使用 ~ 选择后面所有符合条件的兄弟元素。

css 复制代码
input:checked ~ label {
  color: green;
}

四、属性选择器

可以根据元素的属性及其值进行选择。

基础语法:

  • [attr]:存在该属性;
  • [attr=value]:属性等于某值;
  • [attr~=value]:属性值包含一个单词;
  • [attr|=value]:属性值以某值开头并后跟 -
  • [attr^=value]:属性值以某值开头;
  • [attr$=value]:属性值以某值结尾;
  • [attr*=value]:属性值包含某字符串;

示例:

css 复制代码
input[type="text"] {
  border: 1px solid #ccc;
}

a[href*="example.com"] {
  color: blue;
}

img[alt~="logo"] {
  border-radius: 50%;
}

五、伪类选择器

伪类用于选择元素的特定状态或位置,以冒号 : 开头。

常见伪类:

伪类 描述
:link 未访问链接
:visited 已访问链接
:hover 鼠标悬停时
:active 被激活时(点击)
:focus 获取焦点时
css 复制代码
a:hover {
  text-decoration: underline;
}

input:focus {
  border-color: blue;
}

结构性伪类:

伪类 描述
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第 n 个子元素
:only-child 唯一子元素
:empty 没有子节点的元素
css 复制代码
li:nth-child(odd) {
  background-color: #f9f9f9;
}

p:empty::before {
  content: "这是一个空段落";
}

UI 伪类:

伪类 描述
:checked 单选框/复选框被选中
:enabled / :disabled 控件是否启用
:required / :optional 是否为必填项
css 复制代码
input:required {
  border: 2px solid red;
}

六、伪元素选择器

伪元素用于对某些"特殊位置"添加样式,通常以双冒号 :: 开头(也可以单冒号兼容旧浏览器)。

常见伪元素:

伪元素 描述
::before 在元素内容前插入内容
::after 在元素内容后插入内容
::first-line 元素第一行文本
::first-letter 元素第一个字符
::selection 用户选中的部分
css 复制代码
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

a::after {
  content: " 🔗";
}

七、总结

选择器类型 示例 用途
元素选择器 p 所有段落
类选择器 .btn 所有具有 btn 类的元素
ID 选择器 #nav 唯一的导航栏元素
属性选择器 [type="text"] 所有文本输入框
伪类 :hover 鼠标悬停效果
伪元素 ::before 插入装饰内容
组合选择器 div > p 直接子段落

如果你正在学习 CSS,不妨尝试自己动手写几个小例子,比如实现一个带 hover 效果的按钮、一个响应式菜单或者一个简单的卡片布局。实践是最好的老师!

相关推荐
AA-代码批发V哥5 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
Liudef067 小时前
2048小游戏实现
javascript·css·css3
用户3521802454759 小时前
MCP极简入门:node+idea运行简单的MCP服务和MCP客户端
node.js·ai编程
小桥风满袖10 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku11 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
每天开心11 小时前
一文教你掌握事件机制
前端·javascript·ai编程
ac.char12 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
撰卢13 小时前
如何提高网站加载速度速度
前端·javascript·css·html