我知道如何在方向为内联时设置样式
<div dir="rtl">foo</div>
div[dir="rtl"]
{
....;
}
但是如何样式
<div style="direction:rtl">foo</div> ?
两者的行为都符合预期(文本的正确"对齐")，但我需要对其中的一些元素进行更精细的调整(float, text-align…)，并且我无法在第二种情况下正确设置我的规则。
我无法编辑html。我必须使用风格=方向:rtl。
在表单和插入的文本上使用dir="auto"，以便在运行时自动检测提供的内容的方向
<div dir="auto">Hello, world!</div>
<br/>
<div dir="auto">لا إله إلا الله محمد رسول الله</div>
<br/>
<input type="text" dir="auto" value="Hello, world!" >
<br/><br/>
<input type="text" dir="auto" value="لا إله إلا الله محمد رسول الله" >JSFIDDLE演示https://jsfiddle.net/80k0drsf/
因为你不能修改HTML，所以一个非常非常蹩脚的选择器是:
div[style*="direction:rtl"] {
...
}
请注意，我使用的是style*=而不是style=，因为这也将匹配在元素的style属性中声明了不止direction:rtl的元素。
对于选择器的额外强度，您还可以使用[style*="direction: rtl"]来处理style属性，该属性将值与属性分开，并使用空格:
[style*="direction:rtl"], [style*="direction: rtl"] { ... }
或者在这种情况下，你可以只是匹配style属性，其中包含"rtl"，因为我很确定这个字符的组合不用于任何其他属性(忽略外部资源，如背景图像文件名):
[style*="rtl"] { ... }
更新的JSFiddle演示.
将class "rtl"添加到HTML标签
<html dir="rtl" class="rtl">
<head>
<style>
html[class*="rtl"] body {
background-color:blue;
}
html[class*="rtl"] div{
background-color:green;
}
</style>
</haed>
<body>
<div>
</div>
</body>
</html>