CSS选择器
基础选择器：网页样式的敲门砖
元素选择器：最直接的选择方式
/* 所有段落变蓝 */
p {
color: blue;
}
类选择器：灵活多变的样式控制
/* 所有高亮元素 */
.highlight {
background-color: yellow;
}ID选择器：精准定位（慎用）
/* 页面头部样式 */
#header {
position: sticky;
top: 0;
}组合选择器：元素关系的艺术
后代选择器（空格）：选择所有层级
article p {
font-size: 16px;
}子代选择器（>）：只选直系后代
ul > li {
list-style: square;
}兄弟选择器（+和~）：相邻元素控制
/* 紧接在h2后的段落 */
h2 + p {
font-weight: bold;
}
/* h2后的所有段落 */
h2 ~ p {
color: gray;
}嵌套 & 父选择器
/* 嵌套 hover：.card 自身悬停状态 */
.card:hover { border-color: var(--primary); }
/* 嵌套类名：.card 同时有 .active */
.card.active { background: #fff8e1; }
/* 父选择器前置：.icon 容器内的 .card */
.icon .card { margin-left: auto; }
/* BEM 元素：编译后等于 .card__title */
.card__title { font-weight: 600; }
/* 链式嵌套：.card 内的 .card-footer */
.card .card-footer { padding: 0.5rem 0; }深度选择器（Vue 等 Scoped 场景）
/* Vue3 深度选择器：穿透 scoped 样式，作用于子组件 .child */
:deep(.child) { color: red; }
/* Vue2 + SCSS 深度选择器：同样穿透 scoped */
::v-deep .child { color: red; }
/* Svelte 全局选择器：跳出 scoped，匹配任意 .modal */
:global(.modal) { display: block; }属性选择器：智能匹配元素
基本属性选择
[title] {
cursor: help;
}高级匹配技巧
/* 包含"btn"的class */
[class*="btn"] {
cursor: pointer;
}
/* 以https开头的链接 */
[href^="https"] {
color: green;
}
/* .jpg结尾的图片 */
[src$=".jpg"] {
border: 1px solid #ddd;
}
/* [^=] 起始匹配：href 以 "/" 开头的站内链接 */
a[href^="/"] { color: seagreen; }
/* [$=] 结尾匹配：href 以 ".pdf" 结尾的链接后加图标 */
a[href$=".pdf"]::after { content: "📄"; }
/* [=] 全等匹配 + :checked 伪类 */
input[type="checkbox"]:checked { accent-color: var(--primary); }
伪类与伪元素：超越DOM的选择
常用伪类
/* 鼠标悬停效果 */
a:hover {
text-decoration: underline;
}
/* 表格斑马纹 */
tr:nth-child(odd) {
background: #f2f2f2;
}实用伪元素
/* 引用前后加引号 */
.quote::before {
content: "\201C";
}
/* 首字母大写 */
p::first-letter {
font-size: 2em;
}优先级与最佳实践
优先级计算规则
- 内联样式 > ID > 类/属性/伪类 > 元素/伪元素
- !important强制最高优先级（慎用）
专业建议
- 避免过度嵌套（不超过3层）
- 多用类选择器，少用ID选择器
- 合理使用属性选择器减少类名
- 利用组合选择器精确控制范围
打印专用
/* 隐藏无关区域，节省墨水 */
.no-print { display: none; }
/* 链接后显示完整 URL */
a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
/* 强制分页，让标题另起一页 */
h1 { break-before: page; }
/* 避免表格被分页截断 */
table { break-inside: avoid; }实战案例：导航菜单样式
/* 主菜单样式 */
.nav > li {
display: inline-block;
position: relative;
}
/* 下拉菜单 */
.navli:hover > ul {
display: block;
}
/* 当前菜单项 */
.nav.active {
font-weight: bold;
color: #3498db;
}
/* 外部链接标识 */
[href^="http"]::after {
content: " ↗";
}