第 7 课 15 / 17 | 编码:L07-27a
为黄梅戏分享会建立统一样式

审查 AI 建议:改 body 就能统一颜色吗?

目标:两个通知都显示青色。以下为待审代码,不是推荐写法。限定为普通作者样式,无 !important 和其他规则。

<style>
  body { color: teal; }
  .notice { color: navy; }
</style>
<p class="notice">周三14:00 · A208</p>
<p style="color: crimson">请提前十分钟到场</p>

思考:AI 建议“在最后再写一次 body { color: teal; },就能统一通知颜色”。两段文字会变成什么颜色?只修改 body 为什么不够?如何集中管理两条通知的样式?

展开参考分析与修改

第一段仍为 navy,第二段仍为 crimson。两段都有直接指定的颜色,不会靠继承 body 的颜色覆盖这些声明。后写的 body 规则仍然只直接匹配 body。

<style>
  .notice { color: teal; }
</style>
<p class="notice">周三14:00 · A208</p>
<p class="notice">请提前十分钟到场</p>

移除分散的行内颜色,把通知统一标记为 notice,再维护一条规则。多页网站可把它移到共享 CSS 文件中。