CSS参考手册
选择 | Selectors
: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 |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。