css：dir =“ rtl”； VS style =“ direction：rtl”； [英] css: dir="rtl" VS style="direction:rtl"

问题描述

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

I know how to style when the direction is inline

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

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

但是如何设置样式

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

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

推荐答案

由于您无法修改HTML，

As you can't modify the HTML, a really really hacky selector would be:

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

JSFiddle演示 。

请注意，我正在使用 style * = 而不是 style = ，因为这也将匹配具有 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:rtl declared within the element's style property.

在选择器，您还可以使用 [style * = direction：rtl] 处理 style 属性，属性中带有空格的值：

For extra strength in the selector, you could also use [style*="direction: rtl"] to handle style attributes which separate the values from the properties with a space:

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

在这种情况下，您也可以匹配包含 rtl的 style 属性，因为我很确定此字符组合不是t用于任何其他属性（忽略诸如背景图像文件名之类的外部资源）：

Alternatively in this case you could just match on a style attribute 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"] { ... }

> 更新了JSFiddle演示 。

这篇关于css：dir =“ rtl”； VS style =“ direction：rtl”；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！