css:dir ="rtl"VS style ="direction:rtl"

Question

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

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

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

但如何风格

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

两者都表现得如预期的那样(文本的右"对齐")但我需要对内部的某些元素进行更精细的调整(float,text-align ...)并且我无法在第二种情况下正确设置我的规则.

我无法编辑html.我必须使用style ="direction:rtl".

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,一个非常hacky选择器将是:

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

JSFiddle演示.

请注意,我正在使用style*=而不是style=因为这也将匹配元素direction:rtl的style属性中多于声明的元素.

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

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

或者在这种情况下,你可以匹配一个style包含"rtl" 的属性,因为我很确定这个字符组合不会在任何其他属性中使用(忽略外部资源,如背景图像文件名):

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

更新了JSFiddle演示.