在两个不同的类上报告了无降序特异性错误

Question

我使用的是标准格式的 stylelint stylelint-config-standard，我的样式表经常遇到这个错误：

no-descending-specificity

发生这种情况的一个例子是当我 CSS 喜欢：

.footer__social li a {}

.footer__social li a:hover {}

.footer__links li a {}

.footer__links li a:hover {}

然后出现以下错误：

Expected selector ".footer__links li a" to come before selector ".footer__social li a:hover" no-descending-specificity.

很多 CSS 会像这样，因为使用 SASS 像：

.footer__links {
  a {
    a:hover {}
  }
}

如果可以的话，我不想禁用它...

但它为什么抱怨？因为它是 两个独立的类：.footer__social 和 .footer__links。

所以这两个锚点声明不会相互影响，因为它们有不同的父类那么问题是什么？我会这样理解：

.footer__links a:hover {}
a {}

但如果是两个不同的问题，我看不出问题类...

Answer 1

正如 Stylint 向您建议的那样，.footer__social li a:hover {} 比遵循它的规则 .footer__links li a {} (0-0-2 = 2) 具有更高的特异性 (0-1-2 = 3)。您可以使用 this specificity calculator 来确认这一点。

来源顺序在 CSS 中很重要，因此出现警告。此规则关心特异性，3高于2.

来自 the Stylelint docs（已强调）：

Here's how it works: This rule looks at the last compound selector in every full selector, and then compares it with other selectors in the stylesheet that end in the same way.

要满足 noDescendingSpecificity 规则，您的输出需要按以下顺序排列：

.footer__social li a {}

.footer__links li a {}

.footer__social li a:hover {}

.footer__links li a:hover {}

虽然我个人也会按字母顺序对我的规则进行排序，因为这 a) 对我的强迫症更好，b) 允许使用 gzip 进行稍微更好的压缩，例如：

.footer__links li a {}
.footer__social li a {}
.footer__links li a:hover {}
.footer__social li a:hover {}

Answer 2

您可以通过将 stylelint disable commenad 添加到文件顶部来跳过此规则

/* stylelint-disable no-descending-specificity */
// your styles
/* stylelint-enable no-descending-specificity */

在两个不同的 类 上报告了无降序特异性错误

no-descending-specificity error reported on two different classes

stylelint

在两个不同的类上报告了无降序特异性错误