noDescendingSpecificity

摘要

¥Summary

规则生效日期：v1.9.3

¥Rule available since: v1.9.3
诊断类别：lint/style/noDescendingSpecificity

¥Diagnostic Category: lint/style/noDescendingSpecificity
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 warning。

¥The default severity of this rule is warning.
来源：

¥Sources:
- 与 no-descending-specificity 相同
  
  ¥Same as no-descending-specificity

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "noDescendingSpecificity": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

禁止低优先级选择器出现在高优先级选择器之后。

¥Disallow a lower specificity selector from coming after a higher specificity selector.

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.

示例

¥Examples

无效

¥Invalid

1
b a { color: red; }
2
a { color: red; }

code-block.css:2:1 lint/style/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Descending specificity selector found. This selector specificity is (0, 0, 1)
  
    1 │ b a { color: red; }
  > 2 │ a { color: red; }
      │ ^
    3 │ 
  
  ℹ This selector specificity is (0, 0, 2)
  
  > 1 │ b a { color: red; }
      │ ^^^
    2 │ a { color: red; }
    3 │ 
  
  ℹ Descending specificity selector may not be applied. Consider rearranging the order of the selectors. See MDN web docs for more details.

1
a {
2
  & > b { color: red; }
3
}
4
b { color: red; }

code-block.css:4:1 lint/style/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Descending specificity selector found. This selector specificity is (0, 0, 1)
  
    2 │   & > b { color: red; }
    3 │ }
  > 4 │ b { color: red; }
      │ ^
    5 │ 
  
  ℹ This selector specificity is (0, 0, 2)
  
    1 │ a {
  > 2 │   & > b { color: red; }
      │   ^^^^^
    3 │ }
    4 │ b { color: red; }
  
  ℹ Descending specificity selector may not be applied. Consider rearranging the order of the selectors. See MDN web docs for more details.

1
:root input {
2
    color: red;
3
}
4
html input {
5
    color: red;
6
}

code-block.css:4:1 lint/style/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Descending specificity selector found. This selector specificity is (0, 0, 2)
  
    2 │     color: red;
    3 │ }
  > 4 │ html input {
      │ ^^^^^^^^^^
    5 │     color: red;
    6 │ }
  
  ℹ This selector specificity is (0, 1, 1)
  
  > 1 │ :root input {
      │ ^^^^^^^^^^^
    2 │     color: red;
    3 │ }
  
  ℹ Descending specificity selector may not be applied. Consider rearranging the order of the selectors. See MDN web docs for more details.

有效

¥Valid

1
a { color: red; }
2
b a { color: red; }

1
b { color: red; }
2
a {
3
  & > b { color: red; }
4
}

1
a:hover { color: red; }
2
a { color: red; }

1
a b {
2
    color: red;
3
}
4
/* This selector is overwritten by the one above it, but this is not an error because the rule only evaluates it as a compound selector */
5
:where(a) :is(b) {
6
    color: blue;
7
}

noDescendingSpecificity

摘要

如何配置

描述

示例

无效

有效

相关链接