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 效果的按钮、一个响应式菜单或者一个简单的卡片布局。实践是最好的老师!