無遞減特殊性

禁止低特異性選擇器出現在覆寫高特異性選擇器之後。

    #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 限制

此 linter 只會檢查 CSS 以查看特殊性順序。它無法存取 HTML 或 DOM 來詮釋 CSS 的使用方式。

這可能會導致有效的 linting 錯誤乍看之下看起來無效。

例如，以下內容將會導致錯誤

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

這是正確的錯誤，因為第 2 行的 a:hover 比第 3 行的 a 具有更高的特殊性。

這可能會造成混淆，因為「這兩個選取器永遠不會在 DOM 中比對到相同的 a」。然而，由於 linter 無法存取 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 {}