跳至主要内容

no-duplicate-selectors

禁止重复选择器。

    .foo {} .bar {} .foo {}
/** ↑ ↑
* These duplicates */

此规则检查两种类型的重复

  • 单个选择器与规则的选择器列表重复,例如 a, b, a {}
  • 样式表中选择器列表重复,例如 a, b {} a, b {}。即使选择器以不同的顺序或具有不同的间距,也会发现重复项,例如 a d, b > c {} b>c, a d {}

在以下情况下,允许相同的选择器重复

  • 它用于不同的选择器列表,例如 a {} a, b {}
  • 重复项被确定为源自不同的样式表,例如,您以某种方式连接或编译文件,从而为 PostCSS 生成源映射以供读取,例如 postcss-import。
  • 重复项位于具有不同父节点的规则中,例如,在媒体查询内部和外部。

此规则解析嵌套选择器。因此 a b {} a { & b {} } 被视为问题,因为解析后的选择器最终会重复。

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

选项

true

以下模式被视为问题

.foo,
.bar,
.foo {}
.foo {}
.bar {}
.foo {}
.foo .bar {}
.bar {}
.foo .bar {}
@media (min-width: 10px) {
.foo {}
.foo {}
}
.foo, .bar {}
.bar, .foo {}
a .foo, b + .bar {}
b+.bar,
a
.foo {}
a b {}
a {
& b {}
}

以下模式不被视为问题

.foo {}
@media (min-width: 10px) {
.foo {}
}
.foo {
.foo {}
}
.foo {}
.bar {}
.foo .bar {}
.bar .foo {}
a b {}
a {
& b,
& c {}
}

可选的次要选项

disallowInList: true | false (默认值:false)

此选项还将禁止选择器列表中的重复选择器。

例如,使用 true

以下模式被视为问题

input, textarea {
border: 2px;
}
textarea {
border: 1px;
}