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

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

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

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

但如何风格

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

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

我无法编辑html.我必须使用style =“direction：rtl”.

解决方法

由于你不能修改HTML,一个非常hacky选择器将是：

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

JSFiddle demo.

请注意,我使用style * =而不是style =,因为这也将匹配不仅仅是方向的元素：在元素的style属性中声明的rtl.

为了增加选择器的强度,您还可以使用[style * =“direction：rtl”]来处理样式属性,这些属性将属性的值与空格分开：

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

或者在这种情况下,您可以匹配包含“rtl”的样式属性,因为我很确定这些字符组合不会用于任何其他属性(忽略外部资源,如背景图像文件名)：

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

Updated JSFiddle demo.

原文地址：https://www.jb51.cc/css/214862.html