CSS选择器可直接实现条件样式渲染：类选择器（.btn）按需启用、伪类选择器（:hover/:disabled）响应交互状态、属性选择器（[type="submit"]）精准匹配动态属性，无需JavaScript；ID选择器优先级高但应慎用，避免样式覆盖困难。
直接用选择器本身就能实现条件样式渲染，不需要 JavaScript 或额外框架——关键在于选对选择器类型和组合方式。
什么时候该用类选择器而不是标签选择器
类选择器（.btn）本质就是“按需启用”的条件开关：只有加了对应 class 的元素才被匹配。它比标签选择器（button）更精准、更可控。
- 标签选择器作用于所有同类元素，无法区分状态（比如“禁用按钮”和“正常按钮”都套用同一套样式）
- 类选择器允许你为不同状态定义独立规则：
.btn、.btn--disabled、.btn--primary - 多个类可共存：
<button class="btn btn--disabled">提交</button>同时触发两组样式 - 注意：类名里带连字符（如
btn--disabled）是 BEM 命名约定，不是语法要求，但能避免歧义
伪类选择器如何响应用户交互状态
:hover、:focus、:disabled 这些伪类就是天然的“运行时条件判断”，浏览器自动根据 DOM 状态匹配。
-
button:disabled只在disabled属性存在时生效，不用手动切换 class -
a:hover不依赖 JS，但要注意移动端 touch 事件下首次点击可能不触发（部分 iOS 浏览器需cursor: pointer触发） -
:not(.hidden)可排除特定类，适合“默认显示，仅隐藏指定项”的场景 - 避免过度嵌套伪类：
button:hover:active:focus可读性差，且实际触发顺序不可靠
ID 选择器与属性选择器的适用边界
ID 选择器（#header）看似“唯一”，但它的高优先级（100）容易导致样式覆盖困难；而属性选择器（[data-role="menu"]）更灵活、语义更明确。
立即学习“前端免费学习笔记（深入）”；
- ID 选择器只应出现在单页中唯一存在的区域（如
#main-content），重复使用会违反 HTML 规范，JS 获取时也只返回第一个 - 属性选择器适合处理动态生成内容：
[aria-expanded="true"]比硬编码 class 更贴近 ARIA 实际状态 -
[type="submit"]能精准命中表单按钮，比input.btn更可靠（避免误选type="text"） - 注意：属性值含特殊字符（如空格、括号）需用引号包裹：
[data-id="item-1"]
真正容易被忽略的是选择器权重叠加带来的隐性冲突——比如 .nav li a 和 #sidebar a 同时存在时，后者因含 ID 优先级更高，但开发者常误以为 class 多就赢。写选择器前，先想清楚这个样式是“描述结构”还是“表达状态”，再决定用哪种机制。
