标签名选择器效果取决于HTML结构而非CSS规范，class才是可靠的内容意图锚点；推荐用连字符命名，混合使用时需权衡优先级与维护成本，并确保动态插入内容同步添加class。
标签名选择器本身没有语法限制，但实际效果受 HTML 结构约束
浏览器只认合法的 HTML 标签名，比如 div、span、article 这些是有效的；写成 my-button 也能匹配，但前提是这个标签真实存在于 DOM 中（比如是自定义元素或未闭合的错误写法）。更常见的情况是：你以为写了 button 就能选中所有按钮，结果发现有些是 input[type="button"]，有些是封装后的 Web Component，根本不会响应 button 选择器。
所以标签名选择器的“限制”不在 CSS 规范里，而在你的 HTML 是否如你所想——它不关心语义，只做字面匹配。
class 是唯一可靠的内容意图锚点
比起依赖标签类型，class 是开发者主动赋予的语义标记。一个按钮可以是 div、span 或 button，但只要统一加了 class="btn-primary"，就能稳定命中。
-
button.btn-primary：限定必须是 button 标签且带 class，适合需要兼顾语义和样式的场景 -
.btn-primary：最常用，不管什么标签，只要 class 对就生效 -
[role="button"].btn-primary：配合 ARIA 属性，覆盖用 div 模拟按钮的情况
注意：class 名不能以数字开头，不能含空格或制表符，但连字符 - 和下划线 _ 可用（推荐用 -，更符合惯例）。
立即学习“前端免费学习笔记（深入）”；
混合使用时优先级与维护成本要提前想清楚
单独用 button 选择器权重是 1；.btn 是 10；button.btn 是 11。看起来差别不大，但一旦项目里出现 div.btn、a.btn、button.btn 三套样式，又没统一重置 margin 或 display，视觉就会错乱。
建议按以下顺序判断是否加标签前缀：
- 该 class 是否只用于一种标签？比如
.visually-hidden通常作用于任意标签，就不该加前缀 - 是否要防止意外继承？比如
form input容易误选到子组件里的input，改用form .form-input更安全 - 团队有没有约定？比如强制所有组件类名带命名空间：
.c-button、.c-card，此时再加标签名反而冗余
真正容易被忽略的是动态插入内容的 class 同步问题
AJAX 加载、React/Vue 组件挂载、第三方 SDK 插入的 DOM，常常不带预期的 class。比如弹窗由外部 JS 控制，插入的是纯 div 块，没 class，这时靠 div[data-modal] 或 div.modal 都会失效——除非你主动在 JS 里补上 class。
所以不是“加了 class 就万事大吉”，而是得确认：每次新节点进入 DOM 时，class 是不是同步加上了。检查手段很简单：document.querySelectorAll('.my-component') 的数量是否和你预期一致；如果为 0，先别调样式，去看 JS 插入逻辑。
