css - 如何将 css 规则基于 dir 属性的继承值

Question

我知道我可以使用 [dir='ltr'] 或 [dir='rtl'] 选择具有特定值的 dir 属性的元素。

所以我可以定义例如

 [dir='ltr'] .float-end {float:right}
 [dir='rtl'] .float-end {float:left}

获取一个 .float-end 类，当在一个分别带有 ltr 或 rtl 的元素内时，它向右或向左浮动。

当我有一个 rtl 文档的 ltr 子部分时，问题就开始了。

<div dir="rtl">
   <div dir="ltr">
      <div class="float-end"></div>
   </div>
</div>

发生的情况是两个规则都匹配...在这种情况下我只想匹配“ltr”的情况。

如果我想创建诸如 start-20px 和 end-20px 的类来提供 left:20px 和 right:20px 反之亦然，具体取决于上下文。

将导致同时应用 left:20px 和 right:20px....

我正在寻找有关如何克服这个问题的建议。

有没有办法依赖于任何给定类型元素的属性的最接近值？

这一切都是在 LESS mixin 的上下文中完成的，如果它有助于某些方式...

谢谢

Answer 1

问题在于CSS中目前可用的属性选择器没有文档语义。例如，您不能使用属性选择器来表达从其他元素继承的某些属性值。这是因为就属性选择器而言，如果元素的属性没有在文档树中的元素本身上指定某个值，那么它就不会匹配选择器，即使该值是从其他地方派生的。

如前所述，您可以使用 > 组合器将选择限制为最近的祖先，但这需要直接祖先具有指定的属性，当然您无法保证这种情况除非你自己确定。但是如果您能够修改您的标记，那么这确实是最好的方法，即使这意味着您的标记中有一点冗余。我认为即使 LESS 本身也无法帮助您，因为它仍然取决于您的标记结构，这是它无法预料的。

---

就其值(value)而言，Selectors 4 引入了一个 :dir() pseudo-class它带有基于文档语言规则的元素方向性语义，这是属性选择器无法单独完成的。例如，下例中的 div 和 p 都匹配 :dir(ltr)，但只有 div 是 [dir='ltr'] 因为 p 没有指定 dir 属性:

<div dir="ltr">
    <p>Left-to-right text</p>
</div>

在您的情况下，您可以分别使用 .float-end:dir(ltr) 和 .float-end:dir(rtl)；您甚至不需要在祖先上使用伪类。

:dir()伪类与[dir=]属性选择器的比较类似于:lang()和[lang|=]，我解释一下here .

当然，作为一个新提议，:dir() 并没有在任何地方实现(除了 Firefox 的奇怪异常(exception)——我猜 Mozilla 想到了这个想法，实现了它，然后建议将其标准化)。与此同时，你必须按照我想要的方式解决这个问题