样式被划掉是因为 specificity 权重低于其他规则，需对比权重值（如 0,1,1,0）；CSS 层叠还受来源顺序影响，后加载样式优先；提权应优先用精准选择器而非 !important；继承属性不参与优先级计算，需在 Computed 面板确认是否真被应用。

样式被划掉？先看开发者工具里的 specificity 数值

样式“不生效”绝大多数时候不是写错了，而是被更高优先级的规则覆盖了——浏览器在 Styles 面板里用横线划掉你的声明，鼠标悬停会提示 specificity is lower than another rule。这时候别改属性值，先点开那条被划掉的样式，看它右边显示的权重（比如 0,1,1,0 或 110），再对比覆盖它的那条规则的权重。

• ID 选择器（如 #header）算 100，类/伪类/属性选择器（如 .btn、:hover、[disabled]）各算 10，元素（如 div、p）各算 1
• 嵌套层数本身不加权，但长链如 .container .list .item a 累计了 3 个类 + 1 个元素 = 31，很容易压过你后来写的 .item-link（仅 10）
• 行内样式 style="margin: 20px" 权重是 1000，几乎无法被外部 CSS 覆盖（除非加 !important）

为什么改了 .class 还是没用？检查样式来源顺序和加载位置

CSS 的层叠（cascade）不仅看选择器权重，还严格按「来源 + 顺序」裁决：内联 > ID > 类 > 元素；同权重时，后定义的赢。但很多人忽略的是，样式来源本身就有天然排序：

• 外部样式表（）优先级低于内部样式（），而内部样式又低于内联样式
• 多个 标签按 HTML 中出现顺序加载，后面引入的 CSS 文件里的规则，能覆盖前面文件中同权重的选择器
• 如果用了 @import，它会被当作“最后加载”，但实际解析顺序可能滞后，容易引发意料外的覆盖

常见陷阱：UI 框架（如 Ant Design）的 CSS 在 末尾引入，你自定义的 common.css 却放在前面——结果你写的 .btn 永远赢不了框架里更晚加载、权重相当的 .ant-btn。

想强行提权？慎用 !important，优先用精准选择器替代堆嵌套

!important 是把双刃剑：它确实能绕过所有常规优先级，但一旦滥用，后续维护就变成“谁加得更多谁赢”的军备竞赛。真正可持续的提权方式，是写出语义清晰、权重可控的选择器：

• 避免无意义嵌套，比如把 .card .title 改成 .card__title（BEM 命名），既提升可读性，又让权重稳定在 10，不因父容器变化而浮动
• 用子选择器 > 替代后代选择器空格，例如 .modal > .head

  

  er 比 .modal .header 更精准，也更容易预测覆盖关系
• 必要时用属性选择器兜底，比如 [data-role="tooltip"] 权重为 10，和类选择器持平，但语义更强，且不易被通用类误覆盖

记住：!important 只应在调试时临时启用，或用于覆盖第三方库中不可修改的内联样式——长期依赖它，等于主动放弃 CSS 的可维护性。

继承样式不会“失效”，但根本没机会参与优先级计算

像 color、font-size 这类可继承属性，如果子元素没写任何规则，就会“看起来生效”，但这不是优先级赢了，而是它压根没进层叠队列。真正危险的是误判：

• margin、padding、border 等**不可继承**属性，父元素设了再大也没用，子元素必须自己声明
• 在 Computed 面板里，继承来的值会标注 “inherited from XXX”，而直接设置的值才显示具体来源文件和行号
• 如果发现某个文字颜色没变，先查是不是父元素写了 color: #999，而子元素用了 span { color: #333; } ——这时生效的是子元素规则，不是继承；但如果子元素只写了 span { font-weight: bold; }，那颜色就纯靠继承，此时改父元素才有效

最常被忽略的一点：CSS 的“不生效”，往往是你以为它该继承、该覆盖、该按顺序执行，但它其实根本没被浏览器纳入比较范围——打开 Computed 面板，盯着那个“inherited”标签看三秒，比瞎猜快十倍。

# css  # html  # cad  # 浏览器  # 工具  # ai  # 属性选择器  # 为什么  # 继承  # 堆  # class  # 选择器  # 样式表  # margin  # padding  # border  # 伪类  # ui  # 的是  # 加载  # 划掉  # 用了  # 写了  # 行号  # 那条  # 就会  # 是因为 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  Laravel如何记录自定义日志？（Log频道配置）  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  Laravel如何创建自定义Artisan命令？（代码示例）  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  python中快速进行多个字符替换的方法小结  如何在自有机房高效搭建专业网站？  *服务器网站为何频现安全漏洞？  如何在IIS7上新建站点并设置安全权限？  详解vue.js组件化开发实践  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  如何快速查询域名建站关键信息？  企业网站制作这些问题要关注  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  如何构建满足综合性能需求的优质建站方案？  如何用腾讯建站主机快速创建免费网站？  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  JS中对数组元素进行增删改移的方法总结  怎么用AI帮你设计一套个性化的手机App图标？  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  个人摄影网站制作流程,摄影爱好者都去什么网站？  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  英语简历制作免费网站推荐,如何将简历翻译成英文？  怎样使用JSON进行数据交换_它有什么限制  如何快速使用云服务器搭建个人网站？  清除minerd进程的简单方法  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  用v-html解决Vue.js渲染中html标签不被解析的问题  如何在香港服务器上快速搭建免备案网站？  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  网站制作企业,网站的banner和导航栏是指什么？  如何在云虚拟主机上快速搭建个人网站？  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  如何续费美橙建站之星域名及服务？  Laravel Fortify是什么，和Jetstream有什么关系  Android okhttputils现在进度显示实例代码  如何快速搭建安全的FTP站点？  如何在阿里云高效完成企业建站全流程？  html5的keygen标签为什么废弃_替代方案说明【解答】  如何在阿里云香港服务器快速搭建网站？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  如何快速搭建支持数据库操作的智能建站平台？  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法