应先用开发者工具f12选中元素，在styles面板查看带删除线的样式及悬停显示的specificity四元组值，再结合computed面板确认最终生效来源，优先通过提升选择器精准度（如bem命名、属性选择器）而非!important解决覆盖问题。
样式写了但没反应，八成不是写错了，而是被别的规则“压”住了——CSS权重（specificity）才是真正在幕后发号施令的那个人。
怎么看你的选择器被谁覆盖了
打开开发者工具（F12），选中目标元素，在右侧 Styles 面板里找带删除线（strikethrough）的声明。那些就是被更高权重规则干掉的。鼠标悬停在被划掉的属性上，会显示 specificity is lower than another rule，并附带一个四元组值，比如 0,1,1,0：
- ID 选择器（如
#header）贡献 100 - 类 / 属性 / 伪类（如
.btn、[disabled]、:hover）各贡献 10 - 标签 / 伪元素（如
div、::before）各贡献 1 - 内联样式（
style=""）是 1000，基本不可逆
!important 不改变权重值，但它让该声明无视层叠顺序，只比另一个 !important 的权重。
为什么加了类名还是不生效
常见错觉：你写了 .card__title，但页面里同时存在一条 .modal .header h2 —— 后者权重是 0,0,2,1（两个类 + 一个标签），而前者只有 0,0,1,0，直接被盖掉。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 别靠“看起来像”判断匹配，右键审查元素，确认
class名拼写、空格、连字符完全一致 -
.card .title和.card > .title是两回事：前者匹配任意后代，后者只认直接子元素 - 第三方库（如 Ant Design、Bootstrap）常在末尾引入，且用深度嵌套或 ID，你自己的
.btn很难赢过它的.ant-btn-primary - Vue 的
<style scoped></style>或 React 的 CSS Modules 会自动加属性选择器（如div[data-v-abc123]），你写的div .title根本匹配不到真实 DOM
怎么安全地提高优先级
优先用精准选择器，而不是堆砌或硬加 !important。后者短期解急，长期会让后续修改变成“谁最后加 !important 谁赢”的混乱局面。
- 改用 BEM 命名（如
.card__title--large）替代无意义嵌套（.card .content .title），权重稳定且语义清晰 - 用子选择器
>替代空格，例如.dialog > .footer比.dialog .footer更可控 - 必要时用属性选择器兜底：
[data-role="tooltip"]权重 = 10，和类持平，但更不易被意外覆盖 - 避免
@import：它解析滞后，容易打乱预期的加载顺序；多个<link>按 HTML 出现顺序加载，把自定义样式放最后
容易被忽略的权重干扰项
有些“生效”其实是假象，有些“失效”根本不是权重问题。
- 继承属性（如
color、font-size）不参与权重计算，它们只是“冒泡上来”，不是你写的那条规则赢了 -
all: unset或all: revert会重置所有继承和层叠行为，可能让你误以为是优先级问题 - 动态插入的 DOM（如弹窗、Tooltip）可能不在当前样式作用域内，需单独挂载样式或提升作用域
- Flex/Grid 容器里的子项样式被“吃掉”，往往不是优先级问题，而是 display 层级接管了部分样式解释权（例如
vertical-align在 flex 项中无效）
真正难的不是写新样式，而是看清已有样式在页面里怎么打架。多看 Computed 面板里的删除线，少猜；优先用 @layer 和低权重选择器建立秩序，而不是堆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
