仅使用"方向:rtl"设置元素样式

Question

假设我有一个像下面这样的问题。有没有办法仅使用CSS进行选择，仅选择具有direction: rtl样式的元素？提前感谢！

.rightToLeft {
direction: rtl;
}
.leftToRight {
direction: ltr;
}
/* Is there is any simple way to select all of the 3 different spans with the dirction=rtl property? */

<span class="rightToLeft">This is RtL, </span>
<span class="letfToRight">and this is LtR!</span> (: <br/>
<span dir="rtl">This is RtL too,</span>
<span style="direction: rtl;">and this one also! </span>

我已经阅读了这个答案，但它仅在给定属性在元素内给出时才有效，而不是通过 CSS 类(前两个示例(。

Answer 1

您需要 3 条规则：用于类、属性和属性内容。

.rightToLeft {
direction: rtl;
}
.leftToRight {
direction: ltr;
}
.rightToLeft, *[dir='rtl'], *[style*='direction: rtl']{
color: green;
}
/* Is there is any simple way to select all of the 3 different spans with the dirction=rtl property? */

<span class="rightToLeft">This is RtL, </span>
<span class="letfToRight">and this is LtR!</span> (: <br/>
<span dir="rtl">This is RtL too,</span>
<span style="direction: rtl;">and this one also! </span>

Answer 2

您可以使用逗号分隔符选择器：

.right-to-left, *[style*="direction:rtl"], *[dir="rtl"]{
//your style...
}

我从右到左

改为从右到左。 用于 CSS 类中的命名约定。