:dir()
:dir() CSS 伪类根据元素中文本的方向性来匹配元素。
css
/* Selects any element with right-to-left text */
:dir(rtl) {
background-color: red;
}
:dir() 伪类只使用方向性的语义值,即文档本身定义的值。它不考虑样式方向性,即通过 CSS 属性(例如 direction)设置的方向性。
注意:请注意,:dir() 伪类的行为不等同于 [dir=…] 属性选择器。后者匹配 HTML dir 属性,并忽略没有该属性的元素——即使它们从父元素继承了方向。(同样,[dir=rtl] 和 [dir=ltr] 不会匹配 auto 值。)相反,:dir() 将匹配由用户代理计算的值,即使是继承的。
注意:在 HTML 中,方向由 dir 属性决定。其他文档类型可能有不同的方法。
语法
css
:dir([ltr | rtl]) {
/* ... */
}
参数
:dir() 伪类需要一个参数,表示您想要定位的文本方向性。
示例
HTML
html
<div dir="rtl">
<span>test1</span>
<div dir="ltr">
test2
<div dir="auto">עִבְרִית</div>
</div>
</div>
CSS
css
:dir(ltr) {
background-color: yellow;
}
:dir(rtl) {
background-color: powderblue;
}
结果
规范
| 规范 |
|---|
| HTML # selector-ltr |
| HTML # selector-rtl |
| 选择器 Level 4 # dir-pseudo |
浏览器兼容性
加载中…