選擇器最大複合選擇器

限制選擇器中複合選擇器的數量。

   div .bar[data-val] > a.baz + .boom > #lorem {}
/* ↑   ↑                ↑       ↑       ↑
   ↑   ↑                ↑       ↑       ↑
  Lv1 Lv2              Lv3     Lv4     Lv5  -- these are compound selectors */

一個 複合選擇器 是由一個或多個簡單（標籤、類別、ID、通用、屬性）選擇器組成的鏈。如果一個完整的選擇器中有多個複合選擇器，它們將由組合器分隔（例如 、+、>）。您可能想要限制複合選擇器數量的原因之一在 SMACSS 書籍 中有說明。

此規則會解析巢狀選擇器，然後再計算選擇器的深度。選擇器清單 中的每個選擇器都會個別評估。

警告

無關乎其內部選擇器複雜度的 :not() 偽類別被視為一個複合選擇器。該規則會處理該內部選擇器，但會獨立於主選擇器，個別處理。

訊息次要選項 可以接受此規則的參數。

選項

int：允許的最大複合選擇器數量。

例如，使用 3

以下模式被視為問題

.foo .bar .baz .lorem {}

.foo .baz {
  & > .bar .lorem {}
}

以下模式不是問題

div {}

.foo div {}

#foo #bar > #baz {}

.foo + div :not (a b ~ c) {} /* `a b ~ c` is inside `:not()`, so it is evaluated separately */

可選的次要選項

ignoreSelectors: ["/regex/", /regex/, "non-regex"]

忽略一些複合選擇器。這對於像 Vue 的 ::v-deep 或 Angular 的 ::ng-deep 這類行為更像是組合器而非複合選擇器的深度選擇器可能很有用。

例如，使用 2。

給定

["::v-deep", "/ignored/", ":not"]

以下模式被視為問題

.foo .bar ::v-deep .baz {}

p a :not(.foo .bar .baz) {}

.foo .bar > .baz.ignored {}

.foo .bar > .ignored.baz {}

以下模式不是問題

.foo::v-deep .bar {}

.foo ::v-deep .baz {}

p a :not(.foo .bar) {}

.foo {
  &.some-ignored-class ::v-deep > .bar {}
}

.foo .bar > .ignored.ignored {}

.foo .bar > .ignored .ignored {}