selector-max-compound-selectors

限制选择器中的复合选择器数量。

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

一个复合选择器是包含一个或多个简单（标签、类、ID、通配符、属性）选择器的链。如果一个完整的选择器中包含多个复合选择器，它们将由组合器（例如 、+、>）分隔。您可能想要限制复合选择器数量的原因之一在SMACSS 书籍中有所描述。

此规则在计算选择器深度之前解析嵌套选择器。选择器列表中的每个选择器都将单独评估。

警告

:not() 伪类被视为一个复合选择器，无论其内部选择器的复杂程度如何。该规则确实会处理该内部选择器，但会单独处理，独立于主选择器。

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

选项

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 {}