css: dir="rtl" VS 风格="direction:rtl"
Posted
技术标签:
【中文标题】css: dir="rtl" VS 风格="direction:rtl"【英文标题】：css: dir="rtl" VS style="direction:rtl" 【发布时间】：2014-04-26 00:40:54 【问题描述】：当方向为内联时我知道如何设置样式
<div dir="rtl">foo</div>
div[dir="rtl"]
....;
但是如何设置样式
<div style="direction:rtl">foo</div> ?
两者的行为都符合预期（文本的右“对齐”），但我需要对内部的某些元素（浮动、文本对齐...）进行更精细的调整，并且在第二种情况下我无法正确设置我的规则。
我无法编辑 html。我必须使用 style="direction:rtl"。
【问题讨论】：
【参考方案1】：在表单和插入的文本上使用 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。 有时你想要不同的方向，不管内容的语言，所以你不希望浏览器决定。【参考方案2】：由于您无法修改 HTML，因此一个非常 hacky 的选择器将是：
div[style*="direction:rtl"]
...
JSFiddle demo.
请注意，我使用的是style*=，而不仅仅是style=，因为这也会匹配在元素的style 属性中声明的不只是direction:rtl 的元素。
为了增加选择器的强度，您还可以使用[style*="direction: rtl"] 来处理style 属性，这些属性用空格分隔值和属性：
[style*="direction:rtl"], [style*="direction: rtl"] ...
在这种情况下，您也可以只匹配包含“rtl”的style 属性，因为我很确定这种字符组合不会在任何其他属性中使用（忽略背景图像文件名等外部资源):
[style*="rtl"] ...
Updated JSFiddle demo.
【讨论】：
或者如果那个 div 是例如第五个 div，你可以使用div:nth-child(5) ... 。
1+ 你也可以使用div[style~="direction:rtl"]，它可以在这样的情况下工作：jsfiddle.net/5tS8u ..“表示一个属性值是一个空格分隔的列表”..developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors跨度>
@JoshCrozier *= 是一个更好的选择器，因为选择器不能用空格分隔（例如，它可能以 ; 结尾（这会破坏您的 JSFiddle 演示：jsfiddle.net/5tS8u/1） )。
+1 但是，如果它看起来像 direction: rtl 怎么办？ :)
@JamesDonnelly 是的，你是对的 - 当你的答案仍然是 [style=".."] 时，我添加了该评论【参考方案3】：
只需将类“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>
【讨论】：
感谢您的建议，但它不适合，因为我无权访问 html以上是关于css: dir="rtl" VS 风格="direction:rtl"的主要内容，如果未能解决你的问题，请参考以下文章
在 TextView 中使用区域设置 (ltr/rtl) 作为重力
E2202 Required package 'rtl' not found"