css: dir="rtl" VS style="direction:rtl"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22511460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: dir="rtl" VS style="direction:rtl"
提问by frenchone
I know how to style when the direction is inline
我知道如何在方向内联时设置样式
<div dir="rtl">foo</div>
div[dir="rtl"]
{
....;
}
But how to style
但如何风格
<div style="direction:rtl">foo</div> ?
Both behaves as expected (right "alignment" of text) but I need finer tweaking for some elements inside (float, text-align...) and I can't set up my rule correctly in the second case.
两者都按预期运行（文本的正确“对齐”），但我需要对内部的某些元素（浮动、文本对齐...）进行更精细的调整，并且在第二种情况下我无法正确设置我的规则。
I can't edit the html. I MUST use style="direction:rtl".
我无法编辑 html。我必须使用 style="direction:rtl"。
采纳答案by James Donnelly
As you can't modify the HTML, a really really hacky selector would be:
由于您无法修改 HTML，因此一个非常笨拙的选择器将是：
div[style*="direction:rtl"] {
...
}
Note that I'm using style*=as opposed to just style=as this will also match elements which have more than just direction:rtldeclared within the element's styleproperty.
请注意，我正在使用style*=而不是 just style=as 这也将匹配不仅direction:rtl在元素的style属性中声明的元素。
For extra strength in the selector, you could also use [style*="direction: rtl"]to handle styleattributes which separate the values from the properties with a space:
为了在选择器中获得额外的强度，您还可以使用[style*="direction: rtl"]处理style将值与带有空格的属性分开的属性：
[style*="direction:rtl"], [style*="direction: rtl"] { ... }
Alternatively in this case you could just match on a styleattribute which contains "rtl", as I'm pretty sure this combination of characters isn't used in any other property (ignoring external resources like background image file names):
或者，在这种情况下，您可以只匹配style包含“rtl”的属性，因为我很确定这种字符组合未用于任何其他属性（忽略背景图像文件名等外部资源）：
[style*="rtl"] { ... }
回答by Muhammad Tahir
Use dir="auto"on forms and inserted text in order to automatically detect the direction of content supplied at run-time
在表单和插入的文本上使用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 Demo https://jsfiddle.net/80k0drsf/
JSFIDDLE 演示 https://jsfiddle.net/80k0drsf/
回答by ???? ????? ???? ??????
just add class "rtl" to html tag
只需将类“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>
