no-descending-specificity

禁止较低特异性的选择器出现在覆盖较高特异性的选择器之后。

    #container a { top: 10px; } a { top: 0; }
/** ↑                           ↑
 * The order of these selectors represents descending specificity */

源代码顺序在 CSS 中很重要，当两个选择器具有 *相同* 特异性时，*最后* 出现的那个将优先。但是，当其中一个选择器具有 *更高* 特异性时，情况就不同了。在这种情况下，源代码顺序 *无关紧要*：具有更高特异性的选择器将获胜，即使它排在前面。

这两种优先级机制（源代码顺序和特异性）的冲突，在阅读样式表时可能会造成一些混乱。如果具有更高特异性的选择器出现在它覆盖的选择器 *之前*，我们必须更加努力地理解它，因为它违反了源代码顺序的预期。**当覆盖选择器始终出现在它们覆盖的选择器 *之后* 时，样式表最易读。**这样，源代码顺序和特异性这两种机制就可以很好地协同工作。

此规则尽可能地强制执行这种做法，报告的错误比实际应该的要少。它无法捕获所有 *实际* 覆盖选择器，但它可以捕获某些常见错误。

如果您使用大量嵌套，建议您关闭此规则。

该 message 次要选项 可以接受此规则的参数。

工作原理

此规则查看每个完整选择器中的最后一个 *复合选择器*，然后将其与样式表中以相同方式结尾的其他选择器进行比较。

因此，.foo .bar（其最后一个复合选择器是 .bar）将与 .bar 和 #baz .bar 进行比较，但不会与 #baz .foo 或 .bar .foo 进行比较。

而 a > li#wag.pit（其最后一个复合选择器是 li#wag.pit）将与 div li#wag.pit 和 a > b > li + li#wag.pit 进行比较，但不会与 li 或 li #wag 等进行比较。

针对伪元素的选择器不被认为与没有伪元素的类似选择器可比，因为它们针对渲染页面上的其他元素。例如，a::before {} 不会与 a:hover {} 进行比较，因为 a::before 针对伪元素，而 a:hover 针对实际的 <a>。

此规则仅比较位于相同媒体上下文中的规则。因此，a {} @media print { #baz a {} } 很好。

此规则在计算选择器的特异性之前解析嵌套选择器。

DOM 限制

代码检查器只能检查 CSS 以检查特异性顺序。它没有访问 HTML 或 DOM 以解释 CSS 的使用。

这会导致有效的代码检查错误乍一看似乎无效。

例如，以下内容将导致错误

.component1 a {}
.component1 a:hover {}
.component2 a {}

这是一个正确的错误，因为第 2 行的 a:hover 的特异性高于第 3 行的 a。

这可能会导致混淆，因为“这两个选择器永远不会匹配 DOM 中的同一个 a”。但是，由于代码检查器无法访问 DOM，因此它无法评估这一点，因此正确地报告了关于下降特异性的错误。

您可能可以重新组织 CSS 以消除错误，否则建议您为该行禁用规则并留下注释说明为什么应忽略错误。请注意，禁用规则会导致其他有效错误未被报告。

选项

true

以下模式被认为是问题

b a {}
a {}

a + a {}
a {}

b > a[foo] {}
a[foo] {}

a {
  & > b {}
}
b {}

@media print {
  #c a {}
  a {}
}

以下模式 *不被* 认为是问题

a {}
b a {}

a {}
a + a {}

a[foo] {}
b > a[foo] {}

b {}
a {
  & > b {}
}

a::before {}
a:hover::before {}
a {}
a:hover {}

@media print {
  a {}
  #c a {}
}

a {}
@media print {
  #baz a {}
}

可选的次要选项

ignore: ["selectors-within-list"]

忽略选择器列表中的选择器。

以下模式被认为是问题

b a {}
h1 {}
h2 {}
h3 {}
a {}

以下模式 *不被* 认为是问题

b a {}
h1, h2, h3, a {}