:dir

这是一种实验技术

由于该技术的规范尚不稳定，请查看各种浏览器的兼容性表格以查阅使用方法。另外，还需注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

:dir()CSS伪类基于包含在元素中的文本的方向性来匹配相应元素。在HTML中，方向由dir属性决定。对于其他文档类型，可能有其他文档方法来确定语言。

/* Selects any content with right-to-left text */
:dir(rtl) {
  background-color: red;
}

请注意，伪类:dir()的使用方法不等同于使用[dir=…]属性选择器。后者匹配dir的值，而且当该属性没有设置时，即使此时该元素继承了其父母的值，它也并不进行匹配; 类似地，[dir=rtl]或[dir=ltr]不匹配可以在dir属性上使用的auto值。相反，当dir值是继承得来的或是auto值时，:dir()将会匹配由UA计算的值。

同样，:dir()只考虑文档中定义的方向性的语义值，大多数情况下用HTML表示。它不会考虑风格上的方向性，CSS设置的属性direction只是纯粹的风格。

语法

形式语法

:dir( ltr | rtl )

参数

要选择的文本方向。

实例

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

对于上述HTML，:dir(rtl)将匹配最顶层的包含test1的<div>，<span>和包含希伯来字符的<div>。:dir(ltr)将匹配包含test2的<div>：

:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: red;
}

结果如下：

规范

Specification	Status	Comment
HTML Living StandardThe definition of ':dir(ltr)' in that specification.	Living Standard	No changes.
Selectors Level 4The definition of ':dir()' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	No support1	17 (17) -moz 49 (49)2	No support	No support3	No support1	No support4

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support1	17.0 (17) -moz 49.0 (49)2	No support	No support	No support4

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18