Skip to main content

no-descending-specificity

禁止较低特异性的选择器覆盖较高特异性的选择器。

¥Disallow selectors of lower specificity from coming after overriding selectors of higher specificity.

    #container a { top: 10px; } a { top: 0; }
/** ↑                           ↑

 * The order of these selectors represents descending specificity */

源顺序在 CSS 中很重要，当两个选择器具有相同的特异性时，最后出现的选择器将优先。然而，当其中一个选择器具有更高的特异性时，情况就不同了。在这种情况下，源顺序并不重要：即使它排在第一位，具有较高特异性的选择器也会胜出。

¥Source order is important in CSS, and when two selectors have the same specificity, the one that occurs last will take priority. However, the situation is different when one of the selectors has a higher specificity. In that case, source order does not matter: the selector with higher specificity will win out even if it comes first.

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

¥The clashes of these two mechanisms for prioritization, source order and specificity, can cause some confusion when reading stylesheets. If a selector with higher specificity comes before the selector it overrides, we have to think harder to understand it, because it violates the source order expectation. Stylesheets are most legible when overriding selectors always come after the selectors they override. That way both mechanisms, source order and specificity, work together nicely.

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

¥This rule enforces that practice as best it can, reporting fewer errors than it should. It cannot catch every actual overriding selector, but it can catch certain common mistakes.

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

¥The message secondary option can accept the arguments of this rule.

怎么运行的​

¥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.

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

¥So .foo .bar (whose last compound selector is .bar) will be compared to .bar and #baz .bar, but not to #baz .foo or .bar .foo.

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

¥And a > li#wag.pit (whose last compound selector is li#wag.pit) will be compared to div li#wag.pit and a > b > li + li#wag.pit, but not to li or li #wag, etc.

定位伪元素的选择器不被认为与没有伪元素的类似选择器具有可比性，因为它们定位渲染页面上的其他元素。例如，a::before { top: 10px; } 不会与 a:hover { top: 10px; } 进行比较，因为 a::before 的目标是伪元素，而 a:hover 的目标是实际的 <a>。

¥Selectors targeting pseudo-elements are not considered comparable to similar selectors without the pseudo-element, because they target other elements on the rendered page. For example, a::before { top: 10px; } will not be compared to a:hover { top: 10px; }, because a::before targets a pseudo-element whereas a:hover targets the actual <a>.

该规则仅比较同一媒体上下文中的规则。所以 a {top: 10px; } @media print { #baz a { top: 10px; } } 没问题。

¥This rule only compares rules that are within the same media context. So a {top: 10px; } @media print { #baz a { top: 10px; } } is fine.

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

¥This rule resolves nested selectors before calculating the specificity of the selectors.

限制​

¥Limitations

此规则不：

¥This rule doesn't:

  • 可以访问 HTML 或 DOM 结构

    ¥have access to HTML or DOM structure

  • 考虑 !important

    ¥consider !important

  • 考虑单个属性

    ¥consider individual properties

这可能会导致有效的 linting 错误乍一看似乎无效。

¥This can lead to valid linting errors appearing to be invalid at first glance.

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

¥It may be possible to restructure your CSS to remove the error, otherwise it is recommended that you disable the rule for that line and leave a comment saying why the error should be ignored. Note that disabling the rule will cause additional valid errors from being reported.

DOM 结构​

¥DOM structure

linter 只能检查 CSS 来检查特异性顺序。它无法访问 HTML 或 DOM 来解释 CSS 的使用。

¥The linter can only check the CSS to check for specificity order. It does not have access to the HTML or DOM in order to interpret the use of the CSS.

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

¥For example the following will cause an error:

.component1 a { top: 10px; }
.component1 a:hover { top: 10px; }
.component2 a { top: 10px; }

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

¥This is a correct error because the a:hover on line 2 has a higher specificity than the a on line 3.

这可能会导致混乱，因为“两个选择器永远不会匹配 DOM 中相同的 a”。但是，由于 linter 无法访问 DOM，因此无法对其进行评估，因此会正确报告有关降序特异性的错误。

¥This may lead to confusion because "the two selectors will never match the same a in the DOM". However, since the linter does not have access to the DOM it can not evaluate this, and therefore correctly reports the error about descending specificity.

!important​

linter 仅检查选择器，不考虑 !important。

¥The linter only checks selectors and doesn't take !important into account.

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

¥For example the following will cause an error:

a:hover { top: 10px; }
a { top: 10px !important; }

这是一个正确的错误，因为第 1 行的 a:hover 比第 2 行的 a 具有更高的特异性。

¥This is a correct error because the a:hover on line 1 has a higher specificity than the a on line 2.

这可能会导致混淆，因为无论位置如何，带有 !important 的声明都将适用。但是，linter 仅评估选择器，因此可以正确报告有关降序特异性的错误。

¥This may lead to confusion because the declaration with !important will apply regardless of position. However, the linter only evaluates selectors, and therefore correctly reports the error about descending specificity.

不同的属性​

¥Different properties

linter 仅检查选择器，不考虑单个属性。

¥The linter only checks selectors and doesn't take individual properties into account.

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

¥For example the following will cause an error:

a:hover { top: 10px; }
a { left: 10px; }

这是一个正确的错误，因为第 1 行的 a:hover 比第 2 行的 a 具有更高的特异性。

¥This is a correct error because the a:hover on line 1 has a higher specificity than the a on line 2.

这可能会导致混淆，因为两个规则包含不同的声明，并且两者之间没有任何冲突。但是，linter 仅评估选择器，因此可以正确报告有关降序特异性的错误。

¥This may lead to confusion because both rules contain different declarations and there isn't any conflict between either. However, the linter only evaluates selectors, and therefore correctly reports the error about descending specificity.

选项​

¥Options

true​

以下模式被视为问题：

¥The following patterns are considered problems:

b a { top: 10px; }
a { top: 10px; }
a + a { top: 10px; }
a { top: 10px; }
b > a[foo] { top: 10px; }
a[foo] { top: 10px; }
a {
  & > b { top: 10px; }
}
b { top: 10px; }
@media print {
  #c a { top: 10px; }
  a { top: 10px; }
}

以下模式不被视为问题：

¥The following patterns are not considered problems:

a { top: 10px; }
b a { top: 10px; }
a { top: 10px; }
a + a { top: 10px; }
a[foo] { top: 10px; }
b > a[foo] { top: 10px; }
b { top: 10px; }
a {
  & > b { top: 10px; }
}
a::before { top: 10px; }
a:hover::before { top: 10px; }
a { top: 10px; }
a:hover { top: 10px; }
@media print {
  a { top: 10px; }
  #c a { top: 10px; }
}
a { top: 10px; }
@media print {
  #baz a { top: 10px; }
}

可选的辅助选项​

¥Optional secondary options

ignore: ["selectors-within-list"]​

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

¥Ignores selectors within list of selectors.

以下模式被视为问题：

¥The following patterns are considered problems:

b a { top: 10px; }
h1 { top: 10px; }
h2 { top: 10px; }
h3 { top: 10px; }
a { top: 10px; }

以下模式不被视为问题：

¥The following patterns are not considered problems:

b a { top: 10px; }
h1, h2, h3, a { top: 10px; }