CSS选择器详细介绍
- [(井号) - ID选择器](#(井号) - ID选择器)
- . (点) - 类选择器
用来选择具有特定 class 属性的HTML元素
.container {
width: 100%;
padding: 20px;
}
.button-primary {
background-color: blue;
color: white;
}
点击
特点：
- 一个HTML元素可以有多个类（用空格分隔）
- 一个类可以被多个元素使用
- 可复用性好
(井号) - ID选择器
用来选择具有特定 id 属性的HTML元素
#header {
background-color: #333;
color: white;
height: 60px;
}
#main-content {
margin-top: 20px;
}
页面头部
主要内容
特点：
- 每个ID在一个页面中应该是唯一的
- ID选择器优先级很高
- 通常用于唯一的、页面结构的重要元素
- : (冒号) - 伪类和伪元素
伪类 (单冒号 😃
表示元素的特殊状态
/* 鼠标悬停状态 */
a:hover {
color: red;
text-decoration: underline;
}
/* 链接已访问状态 */
a:visited {
color: purple;
}
/* 获得焦点状态 */
input:focus {
border: 2px solid blue;
outline: none;
}
/* 第一个子元素 */
li:first-child {
font-weight: bold;
}
/* 最后一个子元素 */
li:last-child {
border-bottom: none;
}
/* 奇数子元素 */
tr:nth-child(odd) {
background-color: #f0f0f0;
}
伪元素 (双冒号 :😃
在元素前后插入虚拟内容
/* 在元素前插入内容 */
p::before {
content: "注意: ";
font-weight: bold;
color: red;
}
/* 在元素后插入内容 */
p::after {
content: " (新)";
color: orange;
}
/* 选择文本的第一行 */
p::first-line {
font-weight: bold;
}
/* 选择文本的首字母 */
p::first-letter {
font-size: 2em;
color: blue;
}
- 其他常用选择器
/* 元素选择器 */
p {
color: black;
}
/* 通用选择器 - 匹配所有元素 */
- {
margin: 0;
padding: 0;
}
/* 后代选择器 - 空格分隔 /
div p {
font-size: 14px; / div内所有p标签 */
}
/* 子元素选择器 /
div > p {
font-size: 14px; / div的直接子元素p */
}
/* 相邻兄弟选择器 /
h2 + p {
margin-top: 0; / h2后面紧跟的p标签 */
}
/* 属性选择器 */
inputtype="text" {
border: 1px solid gray;
}
/* 多选择器 - 逗号分隔（并列关系） */
h1, h2, h3 {
color: #333;
}
/* 组合选择器 */
.container .item:hover {
background-color: yellow;
}
- CSS优先级（权重）
!important (最高)
↓
ID选择器 (#id) ... 100
类选择器/伪类/属性选择器 (., :, \[\]) . 10
元素选择器 (div, p) ... 1
通用选择器 (*) ... 0
示例：
p { color: black; } /* 权重: 1 /
.text { color: blue; } / 权重: 10 /
#main { color: red; } / 权重: 100 /
p.text#main { color: green; } / 权重: 1+10+100=111 */
/* !important 会覆盖所有 /
p { color: yellow !important; } / 最高优先级 */
- CSS作用范围总结表
┌──────────┬────────────────┬────────────┬────────────┐
│ 选择器 │ 作用范围 │ 优先级 │ 用途 │
├──────────┼────────────────┼────────────┼────────────┤
│ * │ 所有元素 │ 最低 │ 重置样式 │
├──────────┼────────────────┼────────────┼────────────┤
│ element │ 所有该类型元素 │ 低 │ 通用样式 │
├──────────┼────────────────┼────────────┼────────────┤
│ .class │ 所有该类的元素 │ 中 │ 可复用样式 │
├──────────┼────────────────┼────────────┼────────────┤
│ #id │ 唯一该ID的元素 │ 高 │ 特定元素 │
├──────────┼────────────────┼────────────┼────────────┤
│ :hover │ 鼠标悬停时 │ 同父选择器 │ 交互效果 │
├──────────┼────────────────┼────────────┼────────────┤
│ ::before │ 元素前(虚拟) │ 同父选择器 │ 装饰内容 │
├──────────┼────────────────┼────────────┼────────────┤
│ attr │ 有该属性的元素 │ 中 │ 属性匹配 │
└──────────┴────────────────┴────────────┴────────────┘
现在您对CSS选择器应该有了更清晰的认识。需要我帮您分析代码中的样式吗？