html - 检查父级是 ltr 还是 rtl

Question

是否可以检查父母的 css 是 ltr 还是 rtl，然后将不同的样式应用于子元素？

例如我有：

<div class="parent ltr"><div class="child"></div></div>

和

<div class="parent rtl"><div class="child"></div></div>

我想根据父 div 的 ltr 或 rtl 为子类设置不同的样式。

Answer 1

您可以根据您的孩子是在内部rtl还是在ltr父母中指定不同的样式：

.ltr .child { ... details of child of ltr }
.rtl .child { ... details of child of rtl }

或者，您可以在 CSS 中使用“直接后代”进行更严格的控制：

.ltr > .child { ... details of child of ltr }
.rtl > .child { ... details of child of rtl }

Answer 2

.ltr .child { /* some styles here */}
.rtl .child { /* other styles here */}

Answer 3

根据您的代码确定：

div.parent.ltr div.child { /* one set of rules */ }
div.parent.rtl div.child { /* a different set of rules */ }