B32. 层叠优先级 选择器进阶

2.1. 浏览器依照优先级处理样式冲突

想象浏览器是裁判，当多个CSS规则同时"争夺"一个元素时，它会按照"比赛规则"决定谁生效！就像运动会的颁奖优先级：金牌 > 银牌 > 铜牌

优先级规则

/* 优先级从高到低 */
!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器

实战案例

/* 场景：同时设置段落颜色 */
#special { color: red; }    /* ID选择器（优先级100） */
.warning { color: orange; } /* 类选择器（优先级10） */
p { color: blue; }          /* 标签选择器（优先级1） */

⚠️易错点：!important会破坏优先级规则，新手慎用！

2.2. 元素样式的继承规则

网页样式像家族遗传：父元素的某些特征会"传"给子元素，但有些属性不会继承

常见继承属性

/* 这些会继承 */
color, font-family, text-align, line-height

/* 这些不会继承 */
margin, padding, border, background

强制继承

.child {
  color: inherit; /* 明确继承父级颜色 */
}

2.3. 伪类修饰元素的常见使用

给元素添加"临时状态"，就像给按钮装上感应器：当鼠标悬停、点击时自动触发样式变化

常用伪类

/* 链接状态 */
a:link { color: blue; }    /* 未访问 */
a:visited { color: purple; } /* 已访问 */
a:hover { color: red; }    /* 悬停 */
a:active { color: green; }  /* 激活 */

/* 结构伪类 */
li:first-child { font-weight: bold; }
tr:nth-child(odd) { background: #f0f0f0; }

⚠️易错点：伪类顺序必须是 :link → :visited → :hover → :active

2.4. 伪元素赋予 CSS 添加结构的能力

像魔法笔一样"凭空"在元素前后添加内容，常用于装饰性文字或图标

基础用法

/* 必须包含content属性 */
.quote::before {
  content: "“";
  color: #ccc;
  font-size: 2em;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

实战技巧

/* 用伪元素做按钮图标 */
.button::after {
  content: "▶";
  margin-left: 5px;
  transition: 0.3s;
}

.button:hover::after {
  transform: translateX(5px);
}

2.5. 属性选择器：按元素属性精准筛选

通过元素的属性（如 class, data-*, type 等）选择元素，实现更细粒度的样式控制，就像给元素贴上"标签"进行筛选！

注意事项：

• 属性名不区分大小写（HTML 属性通常不区分，但 CSS 写法建议统一小写）
• 使用 ~= 和 |= 时，属性值需为空格/连字符分隔的单词
• 优先级与普通选择器相同，但比 :hover 等伪类低

属性选择器类型对照表

语法形式	描述	示例选择器	作用示例
[attr]	选择带有指定属性的元素	[title]	选择所有带有 title 属性的元素（如 <a title="提示">）
[attr=value]	选择属性值完全等于指定值的元素	[type=text]	选择所有 type="text" 的输入框（如 <input type="text">）
[attr^=value]	选择属性值以指定字符串开头的元素	[class^="col-"]	选择所有 class 以 col- 开头的元素（如 col-12, col-md-6）
[attr$=value]	选择属性值以指定字符串结尾的元素	[href$=".pdf"]	选择所有链接以 .pdf 结尾的 <a> 标签（如 <a href="report.pdf">）
[attr*=value]	选择属性值包含指定字符串的元素	[data-color*="red"]	选择所有 data-color 包含 red 的元素（如 data-color="lightred"）
[attr~=value]	选择属性值包含指定空格分隔的单词的元素	[class~=button]	选择所有 class 包含 button 的元素（如 class="primary button"）
[attr|=value]	选择属性值等于指定值或以指定值加-开头的元素（适合语言代码等场景）	[lang|=en]	匹配 lang="en" 或 lang="en-US" 的元素

实战案例：动态表单验证

/* 选择所有未填写的必填字段 */
input[required]:invalid {
  border: 2px solid red;
}

/* 选择所有邮箱输入框 */
input[type=email] {
  padding: 8px;
  border-radius: 4px;
}

/* 选择所有以"data-state"开头的属性元素 */
[data-state="active"] {
  background: lightgreen;
}

知识回顾

1. 优先级规则：!important > 内联 > ID > 类 > 标签
2. 颜色/字体等属性会自动继承
3. 伪类用单冒号（:hover），伪元素用双冒号（::before）
4. 伪元素必须包含content属性
5. 属性选择器通过元素属性精准筛选，支持[attr^=value]等语法

课后练习

1. （选择）以下选择器优先级最高的是？

   • A. .nav li a
   • B. #header .logo
   • C. body header
   • D. a:hover

2. （填空）补全代码实现奇数行变色： tr:______ { background: #eee; }

3. （纠错）找出错误：

   p::before {
     content: "注意：";
     color: red;
   }

4. 实现导航栏效果：

   • 默认状态下链接为深灰色
   • 悬停时显示下划线并变橙色
   • 当前页面链接保持浅蓝色背景

5. 设计一个评论列表：

   • 用伪元素添加引号装饰
   • 奇数条评论右对齐，偶数条左对齐
   • 悬停时显示删除按钮（用伪元素实现）

6. （选择）以下哪个选择器会匹配 <input type="text" class="search">？

   • A. [class="search"]
   • B. [type=text]
   • C. [class^="s"]
   • D. B和C都正确

7. （填空）补全代码选择所有以.jpg结尾的图片链接： a[href______] { border: 1px dashed #999; }