#selector-max-specificity

限制选择器的优先级。

    .foo, #bar.baz span, #hoo { color: pink; }
/** ↑     ↑              ↑
 *   这些选择器中的每一个 */

访问优先级计算器,了解选择器优先级的可视化表示。

这条规则忽略了带有变量插值的选择器(#{$var}@{var}$(var)`)。

此规则在计算一个选择器的优先级之前先解析选择器嵌套。选择器列表中的每个选择器都将单独计算。

#选项

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/, "string"]

给定:

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

以下模式被视为违规:

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

以下模式被视为违规:

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