Stylelint selector-max-specificity规则疑问：为何0,0,1选择器不报错而0,1,1选择器触发错误？

咱们先把核心逻辑掰明白，再一步步解决你的问题：

1. 先搞懂规则的判定逻辑 #

你设置的selector-max-specificity规则值是"0.2.0"，这个三位数字对应CSS特异性的三个维度：

• 第一位：ID选择器的数量（你设了0，就是完全不能用ID选择器）
• 第二位：类选择器、伪类选择器、属性选择器的数量（最多允许2个）
• 第三位：元素选择器、伪元素选择器的数量（划重点！你设了0，意味着完全不能用元素选择器或伪元素选择器）

这是你遇到问题的关键原因！

2. 为什么wonderful-input::placeholder没报错？ #

你说这个选择器的特异性是0,0,1，其实这里有个小误解：

• wonderful-input是自定义元素选择器，属于第三位的“元素类型”
• ::placeholder是伪元素，同样属于第三位的“伪元素类型”
  所以它的实际特异性是0.0.2——照理说应该触发错误，但你说没报错，大概率是两种情况：
  要么你实际写的是类选择器（比如.wonderful-input::placeholder），但即使这样特异性是0.1.1，第三位还是1，依然超过0的上限，可能是你漏看了配置里的例外规则？
  要么你误用了旧的:placeholder伪类（现在标准是::placeholder伪元素），如果是.wonderful-input:placeholder，那特异性是0.2.0，刚好踩线符合规则，所以不会报错。

3. 为什么带:focus的选择器会报错？ #

看你提供的错误信息里的选择器.input-basic__input--active:focus::placeholder，咱们算一下它的特异性：

• .input-basic__input--active是类选择器（第二位+1）
• :focus是伪类选择器（第二位+1）
• ::placeholder是伪元素选择器（第三位+1）
  凑起来就是0.2.1，而你的规则是0.2.0——第三位的1超过了你设置的0的上限，所以Stylelint直接抛出错误了。

你提到的wonderful-input:focus::placeholder如果是元素选择器的话，特异性是0.1.2，第三位的2同样超过0，也会触发错误。

4. 怎么解决这个问题？ #

如果一定要保留::placeholder的样式，那严格遵守0.2.0的规则是不可能的——毕竟伪元素本身就占了第三位的一个名额。最实际的方案是调整你的Stylelint规则值，把第三位改成1，也就是"0.2.1"，这样就允许最多1个伪元素/元素选择器，刚好适配你的需求。

要是你死磕0.2.0的规则，那只能换思路：比如通过给输入框加类来间接控制占位符样式，但这在CSS里根本做不到——因为占位符样式必须通过伪元素来设置。所以调整规则是唯一可行的办法。

内容的提问来源于stack exchange，提问作者botana_dev