CSS 引入方式

浏览器只有在找到样式表并解析出规则后，才会把 CSS 声明应用到 HTML 元素。外部样式表、style 元素和 style 属性都能改变外观，但它们的作用域、缓存方式和维护成本不同。

<link rel="stylesheet" href="/styles/base.css">
<style>
  .notice { color: darkblue; }
</style>
<p class="notice" style="font-weight: 700">提示</p>

外部样式表适合共享和缓存，style 适合页面级少量规则，行内 style 把声明直接绑定到元素，通常会增加覆盖难度。link 的 URL、响应类型、CSP 和网络状态都会影响它能否生效；文件存在不等于浏览器成功应用。

先确认规则是否进入了页面

开发者工具中要区分三种状态：规则文件没有加载、选择器没有匹配元素、声明匹配但被其他规则覆盖。只看到“CSS 文件请求成功”不能证明目标元素已经使用了该规则。

实验与练习

用同一 .notice 规则分别放到外部文件、style 和行内声明中。修改响应路径制造一次 404，再制造一次选择器不匹配和一次覆盖冲突，分别从 Network 与 Styles 面板找证据。

可运行微实验：从匹配到胜出

在一个页面中保留三个同名元素，给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明，再只改变一个条件：元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value，避免把“选择器没命中”和“命中了但被覆盖”混为一谈。

<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>

常见错误

• 只检查文件请求，不检查规则是否命中。
• 用大量行内样式解决全局样式组织问题。
• 忘记相对 URL 相对于样式表自身或文档 URL 的解析规则。
• 把构建工具生成的 CSS 问题误判成选择器问题。

继续阅读

样式进入页面后，下一步是理解它怎样找到目标元素：基础选择器。

练习

1. 用最小输入复现“CSS 引入方式”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案