CSS

你可能会说

按钮能点但颜色一直是灰色，帮我找出是哪条样式把主题色覆盖了。

CSS 是用规则描述网页外观、布局和不同空间下变化方式的样式语言。例如 HTML 已经有按钮，但按钮仍是灰色或在手机上挤出页面时，浏览器会根据 CSS 选择器匹配规则，并按优先级和书写顺序算出最终样式。CSS 负责呈现，不负责按钮点击后的业务逻辑。

先知道

也常被叫作层叠样式表Cascading Style Sheets

两条 CSS 规则怎样决定按钮的最终颜色

button.css

1.primary { background: #4338ca; }

2.toolbar button { background: #767676; }

3.toolbar .primary { background: #4338ca; }

Computedbackground: #4338ca最终值来自主按钮规则

localhost:3000

点击行为没有改变

浏览器怎样算出最终样式

先看哪些规则匹配：选择器决定一条规则是否作用于这个元素。AI 常在标签上写 class="card" 或 className="card"，CSS 里的 .card 就用来匹配它；像 Tailwind 则是直接把 p-4、flex 等原子类名写在标签上，每个类名对应一条具体样式规则。

再看哪条声明胜出：匹配范围、优先级和书写顺序共同影响结果。开发者工具里的 Styles 和 Computed 面板能显示被覆盖的声明与最后生效的值。

你可以这样告诉 AI Agent

请检查这个主按钮命中的 CSS 规则和最终 computed style，找出灰色声明覆盖主题色的来源。保留 HTML 结构和点击逻辑，只修正样式，并在桌面和 390px 宽度分别验收颜色、布局和是否溢出。

接下来学什么

A. 重写按钮的点击事件，让点击动作顺便设置主题色B. 把按钮换成另一个 HTML 元素，期待浏览器自动使用主题色C. 检查按钮命中的 CSS 规则和 Computed 最终颜色，找出覆盖来源