logo标签列表

CSS：dir="rtl" 与 style="direction:rtl" 的区别

cssdirection
15

我知道如何在行内方向上进行样式设计

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

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

但是如何样式化

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

两者都按预期方式运作（文本的正确“对齐”），但我需要对某些元素进行更精细的调整（浮动、文本对齐等），而我无法在第二种情况下正确设置我的规则。

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

3个回答
32

使用 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/

5
我没给你的帖子点踩，但我猜想其他用户这么做是因为我说我无法访问HTML。 - frenchone
1
有时候，您希望以不同的方向显示内容，而不考虑其语言，因此您不希望浏览器来决定。 - vsync
9

由于您无法修改HTML代码，一种非常非常hacky的选择器是：

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

JSFiddle演示。

请注意，我使用的是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) { ... }。 - GreyRoofPigeon
1
@JoshCrozier *=是更好的选择器，因为选择器可能不会与空格分开（例如，它可能以;结尾（这会破坏您的JSFiddle演示：http://jsfiddle.net/5tS8u/1/））。 - James Donnelly
2
+1 但是如果它看起来像 direction: rtl 呢？ :) - Hashem Qolami
@JamesDonnelly 或者你可以使用多个属性选择器 div[style*="direction"][style*="rtl"]。这里有一个 **演示**。 - Hashem Qolami
@HashemQolami 当然可以，你仍然可以拥有一个ltr方向和具有路径中的rtl的背景图像。 - James Donnelly
显示剩余3条评论
-5

只需将类“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。 - frenchone
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接