selector-max-compound-selectors

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

¥Limit the number of compound selectors in a selector.

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

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

¥A compound selector is a chain of one or more simple (tag, class, ID, universal, attribute) selectors. If there is more than one compound selector in a complete selector, they will be separated by combinators (e.g. , +, >). One reason why you might want to limit the number of compound selectors is described in the SMACSS book.

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

¥This rule resolves nested selectors before counting the depth of a selector. Each selector in a selector list is evaluated separately.

warning

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

¥[!WARNING] The :not() pseudo-class is considered one compound selector irrespective to the complexity of the selector inside it. The rule does process that inner selector, but does so separately, independent of the main selector.

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

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

选项

¥Options

int：允许的最大复合选择器。

¥int: Maximum compound selectors allowed.

例如，对于 3：

¥For example, with 3:

以下模式被视为问题：

¥The following patterns are considered problems:

.foo .bar .baz .lorem {}

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

div {}

.foo div {}

#foo #bar > #baz {}

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

可选的辅助选项

¥Optional secondary options

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

忽略一些复合选择器。这可能对深度选择器（如 Vue 的 ::v-deep 或 Angular 的 ::ng-deep）有用，它们的行为更像组合器而不是复合选择器。

¥Ignore some compound selectors. This may be useful for deep selectors like Vue's ::v-deep or Angular's ::ng-deep that behave more like combinators than compound selectors.

例如，2。

¥For example, with 2.

鉴于：

¥Given:

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