CSS最接近的父规则

Question

据我所知，CSS的工作方式是新规则始终优先于旧规则。 意思是，如果我有：

a { color: black }
a { color: white }

a标记为白色。

我希望这在生成子选择器时不生效，例如：

[dir="ltr"] [text-end] {
    text-align: right;
}
[dir="rtl"] [text-end] {
    text-align: left;
}

如果距离dir的{​​{1}}父亲ltr ltr <div dir="rtl"> <div dir="ltr"> <div text-end style="width: 100%"> a </div> </div> </div> ，则需要{。}}。

但是，使用此代码并非如此：

left

此处的文字位于ltr，但应该是right，并且位于ClientID。

Codepen

我能以任何方式让它接受最亲密的父母的风格吗？

Answer 1

您可以text-align: inherit;向div[text-end]提供从其壁橱父级继承text-align值的内容。这是修改过的css：

div[dir="ltr"] {
  text-align: right;
}

div[dir="rtl"] {
  text-align: left;
}

div[text-end] {
  text-align: inherit;
}

div[dir="ltr"] {
  text-align: right;
}

div[dir="rtl"] {
  text-align: left;
}

div[text-end] {
  text-align: inherit;
}

<div dir="rtl">
  <div dir="ltr">
    <div text-end style="width: 100%">
      a
    </div>
  </div>
</div>