我知道当方向内联时如何设计样式
<div dir="rtl">foo</div>
div[dir="rtl"]
{
....;
}
但是如何设计
<div style="direction:rtl">foo</div> ?
两者的行为都符合预期（文本的正确“对齐”），但我需要对内部的某些元素（浮动、文本对齐...）进行更精细的调整，并且在第二种情况下我无法正确设置我的规则。
我无法编辑html。我必须使用 style="direction: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，所以一个非常非常 hacky 的选择器将是：
div[style*="direction:rtl"] {
...
}
请注意，我使用的是
style*=style=direction:rtlstyle为了增强选择器的强度，您还可以使用
[style*="direction: rtl"]style[style*="direction:rtl"], [style*="direction: rtl"] { ... }
或者在这种情况下，您可以只匹配包含“rtl”的
style[style*="rtl"] { ... }
只需将“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>