Question

我知道当方向是内联时如何设置样式

<div dir="rtl">foo</div>

div[dir="rtl"]
{
 ....;
}

但如何打造

<div style="direction:rtl">foo</div> ?

两者都表现得如预期的那样（正确＆＃34;对齐＆＃34;文本）但我需要对内部的某些元素进行更精细的调整（float，text-align ...）并且我无法设置我的规则正确地在第二种情况下。

我无法编辑html。我必须使用style =＆＃34; direction：rtl＆＃34;。

Answer 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/

Answer 2

由于你无法修改HTML，一个非常黑客的选择器将是：

div[style*="direction:rtl"] {
    ...
}

JSFiddle demo

请注意，我使用style*=而非style=，因为这也会匹配元素中声明的direction:rtl以外的元素style { {1}}属性。

为了在选择器中获得额外的力量，您还可以使用[style*="direction: rtl"]来处理style属性，这些属性使用空格将值与属性分开：

[style*="direction:rtl"], [style*="direction: rtl"] { ... }

或者在这种情况下，您可以匹配包含＆＃34; rtl＆＃34;的style属性，因为我非常确定这些字符组合不会在任何字符组合中使用其他属性（忽略外部资源，如背景图像文件名）：

[style*="rtl"] { ... }

Updated JSFiddle demo

Answer 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>

css：dir =“rtl”VS style =“direction：rtl”

3 个答案: