用[class="xxx"]可匹配类名含指定子串的元素，如button[class="btn-"]选中所有含"btn-"的按钮，但不区分单词边界；需全词匹配时应使用[class~="xxx"]。
用 [class*="xxx"] 匹配类名包含关键词的元素
当元素类名不统一但有共同片段（比如 btn-primary、btn-danger、btn-small），直接写多个类选择器太啰嗦。用属性包含选择器更省事：
例如批量选中所有带 btn- 前缀的按钮：
button[class*="btn-"] { color: red; }
注意点：
-
[class*="btn-"]会匹配class="btn-primary disabled"，但也会误中class="my-btn-text"这类含子串的值 - 它不区分单词边界，比
[class^="btn-"]（开头匹配）宽松，比[class~="btn-primary"]（全词匹配）宽松 - 若类名顺序不确定或含空格，优先考虑
[class~="xxx"]配合已知完整类名
组合类名与属性选择器精准定位特定状态
常见场景：只对带某个类、同时具有某属性的元素生效，比如禁用态按钮需特殊样式：
立即学习“前端免费学习笔记（深入）”；
button.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
这种写法比单纯写 button[disabled] 更安全，避免影响其他类型禁用按钮。
关键细节：
- 类名和属性选择器连写（无空格）表示「同时满足」；加空格则变成后代选择器
-
[disabled]是存在性匹配，不关心值（disabled="false"也会被选中）；如需严格判断值，用[disabled="true"] - HTML 中布尔属性如
disabled、checked没有值也有效，CSS 属性选择器仍能捕获
用 :is() 简化多类名重复书写
当要为多个不同类名的元素应用同一组样式，又不想写一堆逗号分隔的选择器，:is() 是现代方案：
.card :is(.title, .subtitle, .meta) { font-size: 0.9em; color: #666; }
这比写 .card .title, .card .subtitle, .card .meta 更简洁，且支持动态类名变化（伪类、属性等也能塞进去）。
要注意：
-
:is()内部任一选择器失效（比如语法错），整个函数会被浏览器忽略——这是容错设计，不是 bug - 它不提升优先级：
:is(.a, .b)的权重等同于单个.a - 旧浏览器（如 IE、旧版 Safari）不支持，需确认兼容性或搭配
@supports
别忽略 class 属性的空格敏感性
CSS 类选择器（.xxx）和属性选择器（[class="xxx"]）行为完全不同：
-
.btn能匹配class="btn"、class="btn primary"、class="primary btn"—— 它按空格分词后全词匹配 -
[class="btn"]只匹配class="btn"，哪怕多一个空格或额外类名就失效 - 想模拟
.btn的语义但必须用属性选择器？得写成[class~="btn"]（波浪号表示空格分隔的全词匹配）
实际项目里，混用类选择器和属性选择器时，最容易在这里翻车：以为 [class="xxx"] 和 .xxx 等价，结果漏掉大量元素。
