为什么stylelint的selector-no-qualifying-type规则禁止按类型限定选择器？

开发者阿泽

2026-9-29

类型限定选择器（如`a.foo`）的问题主要有以下几点：

降低样式复用性
限定类型的类选择器只能作用于固定标签，比如a.foo的样式仅对<a>标签生效，后续如果需要把相同样式复用到<button>、<div>等其他标签时，要么新增重复的样式规则，要么修改原有DOM结构，反而增加维护成本。如果直接使用无类型限定的.foo，所有添加了该类的标签都能复用样式，灵活度高很多。
不必要地提升选择器权重
a.foo的权重是「1个标签选择器 + 1个类选择器」，比纯类选择器.foo的权重更高，后续如果需要用其他类覆盖该样式，仅靠同名级的类选择器无法生效，只能被迫编写权重更高的选择器甚至使用!important，很容易导致项目整体样式权重越来越混乱，后期维护难度陡增。
增加浏览器样式匹配开销
浏览器匹配CSS选择器的逻辑是从右往左执行，匹配a.foo时会先找到所有带.foo类的元素，再逐一校验这些元素是不是<a>标签，多了一层匹配逻辑，单个选择器的影响可以忽略，但项目规模大了之后大量的这类选择器会积累出可感知的性能损耗。
不符合组件化开发的解耦原则
现代前端开发基本都是组件化模式，组件的样式应该和具体渲染的DOM标签解耦，比如一个卡片组件可能根节点用<div>也可能改做<article>，如果样式写了div.card，改标签的时候样式直接失效，而无类型限定的.card就不存在这个问题。