Question

我有这段代码：

[dir="ltr"] [icon-start] icon {
  padding-right: 0.3em;
}

[dir="rtl"] [icon-start] icon {
  padding-left: 0.3em;
}

.custom-icon {
  padding: 0;
}

当我这样做时：

<div dir="ltr">
  <div icon-start>
    <icon class="custom-icon"></icon>
  </div>
</div>

icon元素将第一个和第三个规则组合为0 0.3em 0 0

的填充

这不是理想的行为。我希望css能够像往常一样正常工作，并且最后一条规则是射击调用者。

2种可能的解决方案，不受欢迎：

将= !important添加到.custom-icon - 不受欢迎，因为我希望尽量减少使用!important +我构建我的代码，以便我不需要使用重要的。< / LI>
为.custom-icon添加方向规则。不希望因为它膨胀我的包大小（这需要在1000个地方发生），它不是很友好，通常可能会被误解。

类似的东西：

[dir="ltr"] .custom-icon, [dir="rtl"] .custom-icon {
  padding: 0
}

有没有办法告诉css忽略优先级结构中的[dir]规则？

Answer 1

有没有办法告诉css忽略优先级结构中的[dir]规则？

不，你不能让一个规则从级联中删除任意其他规则。

如果!important不可选，您将不得不匹配其他规则的特异性：

[dir] [icon-start] .custom-icon {
  padding: 0;
}

（从技术上讲，你还需要icon类型选择器来真正匹配其他规则的特异性，但由于类选择器更具体，因此类型选择器不是必需的。）

或者，您可以从其他规则中排除.custom-icon，这样您就不必担心覆盖它们了：

[dir="ltr"] [icon-start] icon:not(.custom-icon) {
  padding-right: 0.3em;
}

[dir="rtl"] [icon-start] icon:not(.custom-icon) {
  padding-left: 0.3em;
}

css按方向划分优先顺序，需要！进口商？

1 个答案: