选择器
约 846 字大约 3 分钟
2025-06-13
注
选择器是用来查找指定标签，应用样式
基础选择器
标签选择器
提示
标签选择器选择页面中所有同名标签，缺点是无法差异化
p {
/* color修饰文本颜色 */
color:red;
}
div{
color:blue;
}class类选择器
注意
命名不使用纯数字、带中文；见名知意就可以了
一个类选择器可供多个标签使用
<html>
<head>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<h1 class="red">
红色标题
</h1>
<p>
未应用class选择器不显示红色
</p>
<span class="red">红色文字</span>
<div calss="blue">
与指定类选择器不一致，还是黑色
</div>
</body>
</html>一个标签可使用多个类名，类名之间用空格隔开
<html>
<head>
<style>
.red {
color: red;
}
.font-style{
/* font-size 修改文本大小 */
font-size:30px;
}
</style>
</head>
<body>
<span class="red">
一个类名，红色标题
</span>
<p class="red font-style">
多个类名，红色放大文字
</p>
</body>
</html>id标签选择器
注
一个页面有且只有同一个ID，差异化设置标签
一般配合Javascript 使用，很少用来设置css样式
<html>
<head>
<style>
#blue {
color: blue;
font-size:30px;
}
</style>
</head>
<body>
<p id="blue">
蓝色放大文字
</p>
</body>
</html>通配符选择器
注意
调用后浏览器自动查找页面所有标签
通配符常用于清除默认样式，现在使用频率少了，实际开发请不要使用
<html>
<head>
<style>
* {
color: deekpink;
}
</style>
</head>
<body>
<p>
p标签
</p>
<span>span标签</span>
</body>
</html>复合选择器
注
复合选择器由多个基础选择器组合而来
后代选择器
提示
后代可以是儿子、孙子或重孙子
div span {
color: red;
}<spn>单独的span</spn>
<div>
<span>div -> span</span>
</div>子代选择器
div>span {
color: pink;
}<span>单独的span</span>
<div>
<span>只作用到儿子</span>
<div>
<span>孙子</span>
</div>
</div>并集选择器
警告
没有权重叠加
div,span {
color: blue;
}<span>单独的span</span>
<div>
<span>div里的span</span>
</div>交集选择器
div.green {
color: red;
}<div class="green">
div绿色文字
</div>
<span color="green">正常颜色</span>伪类选择器
/* a标签注意顺序 link visited hover active */
a:link{
/* 链接正常访问状态 */
color: #333;
}
/* 链接访问后 */
a:visited{
color: purple;
text-decoration: double;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
.box{
width:100px;
height:100px;
background-color:pink;
}
.box:hover{
background-color:hotpink;
}<a href="#">🔗 链接文字</a>
<a href="#">🔗 链接文字</a>
<div class="box">
</div>注
hover支持的浏览器如下
结构伪类选择器
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第N个E元素 |
nth-child(N)支持以下公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n |
| 奇数 | 2n+1、2n-1 |
| 找到5的倍数 | 5n |
| 找到第5个以后的标签 | n+5 |
| 找到第5个以前的标签 | n-5 |
伪元素选择器
重要
必须设置 content:""
伪元素默认是行内显示模式
权重和标签选择器相同
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素内部最前面添加一个伪元素 |
| E::after | 在E元素内部最后面添加一个伪元素 |
更新日志
2025/6/23 14:31
查看所有更新日志
38633-feat(theme): ✨ 启用博客功能于