HTML怎么用CSS层叠_HTML CSS层叠规则优先级解析【收藏】

因为ID选择器#header权重(0,1,0,0)远高于类选择器.btn(0,0,1,0)，而#header p权重(0,1,0,1)更碾压其组合，同权时后定义规则胜出，且:where()等零权重选择器仅靠顺序生效。 为什么 .btn 覆盖不了 #header p？ 因为选择器权重不匹配。ID 选择器 的权重是 (0, 1, 0, 0)，而类选择器 是 (0, 0, 1, 0)，哪怕你写十个 连用（如 ），总权重仍是 (0, 0, 10, 0)，依然低于一个 ID。真正生效的是 —— 它含一个 ID + 一个元素，权重 (0, 1, 0, 1)，高位 b=1 直接碾压。 常见错误现象： 在组件里加 想覆盖父容器的 ，结果无效 调试时发现 Chrome DevTools 显示样式“被划掉”，但找不到是谁干的 实操建议： 打开 DevTools → Elements 面板 → 点击目标元素 → 右侧 Styles 标签页，看哪些规则带删除线，再点左侧小箭头展开，就能看到所有匹配规则及其 specificity 值 避免混用 ID 和 class 控制同一类 UI 元素；现代 CSS 架构（如 BEM）基本弃用 ID 选择器 若必须覆盖高权重要求，优先用更具体的选择器（如 ），而非依赖 内联 为什么有时也不生效？ 它确实有最高基础权重 (1, 0, 0, 0)，但有两个例外会绕过它： 立即学习 “ 前端免费学习笔记（深入） ”； 声明：比如外部 CSS 里写了 ，它会压制行内 CSS Custom Properties（CSS 变量）+ 或 ：如果父级设置了 ，子元素用 ，这个声明虽在外部样式表里，但计算时机晚于行内样式解析，可能造成视觉上“覆盖” 使用场景： 动态插入的提示框、tooltip 常用行内样式快速控制位置/颜色 服务端渲染首屏时用 注入关键样式，规避 FOUC 注意： 属性无法继承，也无法用 或 包裹，响应式或条件逻辑必须交还给外部 CSS。 两个 class 选择器冲突，谁赢？ 看定义顺序，不是看 HTML 中 class 属性的书写顺序。例如： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 最终文字是红色 —— 因为 在 CSS 中后定义。HTML 中 或 完全没影响。 容易踩的坑： 多人协作时，不同文件引入 CSS 的顺序不一致，导致本地和构建后表现不同 用 Webpack 的 默认把 CSS 插入 末尾，但若手动用 改变插入点，会打乱预期顺序 Shadow DOM 中的样式作用域隔离，外部 class 根本不参与层叠计算 建议：对同一功能模块的样式，尽量收拢到单个 CSS 文件；必要时用 BEM 命名（如 + ）从语义上规避冲突。 为什么 :where(.a) { } 能覆盖 .b { } 却不增加权重？ 是个“零权重”函数：它内部的选择器不贡献任何 specificity。所以 权重是 (0, 0, 0, 0)，而 是 (0, 0, 1, 0)。按理说 应该赢 —— 但它输了，是因为 规则写在了后面，触发了“同权情况下的后定义优先”规则。 这其实是刻意设计的便利性机制： 用于重置默认样式（如 ），确保不会意外压过业务 class 配合 使用时要小心： 权重取内部最高者（即 (0, 0, 1, 0)），而 始终是 0 目前 Safari 15.4+、Chrome 105+、Firefox 103+ 支持；旧版需回退到逗号分隔写法 真正容易被忽略的是：当你以为用 “安全覆盖”时，其实只是靠书写顺序占了便宜；一旦别人把你的 规则挪到前面，或者加了个更高权重要求，它立刻失效 —— 它不是保险丝，只是个轻量开关。