We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

总结

: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 最初定义.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,