stylelint - 两个不同类别报告的无降序特异性错误

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 .

由于使用 SASS，很多 CSS 会像这样:

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

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

但它为什么提示呢？照原样 两个独立的类 : .footer__social和 .footer__links .

所以这两个 anchor 的声明对彼此没有任何影响，因为它们有不同的父类，那么问题是什么？我会理解如下:

.footer__links a:hover {}
a {}

但是如果它是两个不同的类，我就看不到这个问题......

Answer 1

正如 Stylint 为您提供的建议 .footer__social li a:hover {}比遵循它的规则具有更高的特异性 (0-1-2 = 3) .footer__links li a {} (0-0-2 = 2)。您可以使用 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 {}