我想制作一个双语网页，所以我制作了两个样式表，一个是rtl.css，另一个是ltr.css，我有rtl样式表链接到我的html。。它链接正确，我试着改变背景颜色，它改变了。。。所以问题是，当我尝试下面的代码时，它根本不起作用。。其静止的ltr
:root{direction:rtl;}
我甚至尝试过：
body{direction:rtl}
html{direction:rtl}
我试着指定"；unicode bidi:override"并嵌入没有任何帮助
依赖多个CSS文件来提供相同样式的不同布局是一种糟糕的做法。所以，既然你的问题不是那么清楚，我会尽力帮你解决整个问题。首先，应该包含一个样式表，该样式表考虑基于静态属性的特定组件的差异。例如，将html标记的一个名为layout-dir的属性与lang属性一起设置。
<html lang="en" layout-dir="ltr">
...
</html>
无论您使用的是PHP、ASP。NET、React.js等。每当显示语言发生变化时，这两个属性都必须发生变化。话虽如此，我们将基于layout-dir进行样式设计。例如，考虑以下代码：
HTML
<div id="parent">
<div class="child">...</div>
<div class="child">...</div>
<div class="child">...</div>
<div class="child">...</div>
</div>
CSS
#parent {
display: flex;
align-items: center;
}
.child {
flex-grow: 1;
}
现在，当布局方向是ltr时，我们希望子div从左边开始渲染；否则，从右边开始。所以，我们说：
html[layout-dir="ltr"] #parent {
flex-direction: row;
}
html[layout-dir="rtl"] #parent {
flex-direction: row-reverse;
}
回到html标签中的属性，您可以这样设置layout-dir：
PHP
<?php
<html lang="<?=$lang?>" layout-dir="<?=$dir?>">
...
</html>
Javascript
const html = document.getElementByTagName("html");
html.setAttribute("lang", "en");
html.setAttribute("layout-dir", "ltr");