MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

总结

:dir()伪类匹配特定文字书写方向的元素。在HTML中, 文字方向由dir属性决定。其他的文档类型可能有其他定义文字方向的方法。

值得注意的是用CSS伪类 :dir() 并不等于使用 [dir=…] 属性选择器。后者匹配 dir 的值且不会匹配到未定义此属性的元素,即使该元素继承了父元素的属性;类似的, [dir=rtl][dir=ltr]不会匹配到dir属性的值为auto的元素。而 :dir()会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的。

另外,:dir()伪类仅考虑文档(大多数情况是HTML)中定义的文字方向的语义值(semantic value),并不会考虑格式值(styling value),如CSS属性 direction 的值。

语法

元素:dir(文字书写方向) { style properties } 文字书写方向为ltr或rtl

示例

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

本例中 :dir(rtl) 会匹配最外层的div,内容为test1的span,和有希伯来字符的div。:dir(ltr) 会匹配到内容为test2的div.

规范

规范 状态 注释
Selectors Level 4
:dir()
Working Draft 最初定义.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 17 (17) -moz 未实现 未实现 未实现
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 17.0 (17) -moz 未实现 未实现 未实现

文档标签和贡献者

 此页面的贡献者: nick-ChenZe, fskuok
 最后编辑者: nick-ChenZe,