selector-max-specificity

限制选择器的特异性。

    .foo, #bar.baz span, #hoo { color: pink; }
/** ↑     ↑              ↑
 * Each of these selectors */

访问 特异性计算器 以直观地表示选择器特异性。

此规则忽略具有变量插值的選擇器 (#{$var}、@{var}、$(var))。

此规则在计算选择器特异性之前解析嵌套选择器。每个 选择器列表 中的选择器都单独进行评估。

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

选项

string: 允许的最大特异性。

格式为 "id,class,type"，如 W3C 选择器规范 中所述。

例如，使用 "0,2,0"

以下模式被视为问题

#foo {}

.foo .baz .bar {}

.foo .baz {
  & .bar {}
}

.foo {
  color: red;
  @nest .baz .bar & {
    color: blue;
  }
}

以下模式 *不* 被视为问题

div {}

.foo div {}

.foo div {
  & div a {}
}

.foo {
  & .baz {}
}

.foo {
  color: red;
  @nest .baz & {
    color: blue;
  }
}

可选的次要选项

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

鉴于

[
  "0,2,0",
  {
    "ignoreSelectors": [":global", ":local", "/^my-/"]
  }
]

以下模式 *不* 被视为问题

:global(.foo) .bar {}

:local(.foo.bar) {}

:local(.foo, :global(.bar).baz) {}

my-element.foo.bar {}

以下模式被视为问题

:global(.foo) .bar.baz {}

:local(.foo.bar.baz) {}

:local(.foo, :global(.bar), .foo.bar.baz) {}

my-element.foo.bar.baz {}