html - css 按方向排列优先级，需要 !important?

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>

图标元素结合第一条和第三条规则进行填充 0 0.3em 0 0

这不是期望的行为。我希望 css 像往常一样正常工作，最后一条规则是指挥者。

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

• 将 =!important 添加到 .custom-icon - 不受欢迎，因为我想尽量减少 !important 的使用 + 我构建了我的代码不需要使用 important。
• 为 .custom-icon 添加方向规则。不受欢迎，因为它会使我的包大小膨胀(这需要在大约 1000 个地方发生)，它不是很友好，而且通常会被误解。

类似于:

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

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

Answer 1

Is there a way I can tell css to ignore [dir] rules in the priority structure?

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

如果 !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;
}