01 · 选择器、状态与样式组织

先理解机制

选择器是在 DOM 中描述一组匹配规则。p 选择标签，.note 选择类名，#intro 选择指定 id。空格选择后代，> 只选择直接子元素，这在卡片嵌套列表时很重要。一个元素可以有多个类，类名应表达角色而不只是颜色，否则改视觉设计时还要改 HTML 语义。

伪类描述状态或结构条件，例如 :hover、:focus-visible 和 :checked；伪元素描述被选择元素的某个部分，例如 ::before。生成内容适合装饰，但不应承载关键说明。外部样式表使多个页面共享规则；调试时先确认文件加载，再讨论为什么某条规则没有匹配。

可运行示例

<style>
  body { font-family: system-ui, sans-serif; line-height: 1.7; }
  .note { color: #176b4b; background: #edf6ee; padding: 20px; }
</style>
<p class="note">Small steps, real progress.</p>

推演与验证

运行示例后新增第二段 .note，两个段落应共享样式。再在 .note 内加入 span，比较 .note span 与 .note > span：增加一层 strong 包裹后，前者仍匹配，后者不再匹配。开发者工具中查看匹配规则和最终样式，不要通过不断添加选择器猜测原因。

常见错误与边界

不要把所有样式绑定到 id，组件会很难复用；不要只写 :hover 而忽略键盘焦点；不要认为类名越长权重越高。选择器拼错与被其他规则覆盖是两种不同问题，前者根本不匹配，后者匹配后输给层叠。

动手练习

设计 .lesson-card 和 .lesson-card__link 两个类，让链接在悬停和键盘聚焦时都有清晰反馈。

<style>
.lesson-card__link:hover { text-decoration: underline; }
.lesson-card__link:focus-visible { outline: 3px solid #286c4d; outline-offset: 4px; }
</style>
<a class="lesson-card__link" href="#practice">Practice</a>
<h2 id="practice">Practice</h2>

进一步阅读

• MDN · Cascade