html - 如何在css文件中左右切换？

Question

我有一个既是 RTL 又是 LTR 的 HTML django 模板页面（取决于用户的语言环境）。

此页面的 CSS 存储在另一个文件中，并且该文件当前是静态的。

根据语言环境左右切换属性的最佳方法是什么？CSS 中是否有针对此问题的内置属性？（不想用JS，感觉太乱了）

我有：

.elem{
    left: 10px; 
    bottom: 10px;
    position: absolute;
}

我想要这样的东西：

.elem{
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px;
    position: absolute;
}

目前我能想到的唯一选择是将文件也转换为模板：

.elem{
    {{dir}}: 10px; 
    bottom: 10px;
    position: absolute;
}

有没有更好的方法可以让我的 CSS 文件保持静态？

score 11 · Accepted Answer

您说您正在根据语言环境制作文档 rtl 或 ltr。在这种情况下，您可以使用:lang()选择器根据区域设置使文档的某些部分具有样式。

如果您想要更多支持（IE7+），您可以使用属性选择器selector[lang='en']，尽管这只会测试指定选择器上的属性。

如果您在 html 元素中指定语言（lang="en"例如，您应该使用该语言），您可以将 html 选择器放在您要在某些语言环境中应用的类的前面：

.elem {
    margin: 0 10px 0 0;
    color: blue;
}

html[lang='en'] .elem {
    margin: 0 0 0 10px;
}

更好的是，如果您指定了dir属性，您可以直接在 css 中使用它，如下所示：

.elem[dir='rtl'] {
    margin: 0 10px 0 0;
}

请注意，对于 body 元素上的类，您将始终依赖于该类始终存在。但是dirandlang属性可以在更具体的范围内指定，例如单个 div，并且仍然可以在 css 中与“其他”阅读方向的样式一起使用。

编辑

最后，展望未来，CSS 选择器“4 级”将包含一个伪标签，该标签将能够过滤文本方向性。当然，这些规范正在开发中，浏览器可能需要数年时间才能可靠地使用它：

score 5 · Accepted Answer

如何通过一个特殊的类将方向添加到你的 body 元素，然后你可以编写相应的选择器：

<body class="rtl">

在 CSS 中：

.rtl .myclass {
   text-align: right;
}

2 回答 2