:dir()
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSS 伪类 :dir() 根据元素中文本的书写方向匹配元素。
css
/* 选择任何文本方向为从右到左的元素 */
: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>测试 1</span>
<div dir="ltr">
测试 2
<div dir="auto">עִבְרִית</div>
</div>
</div>
CSS
css
:dir(ltr) {
background-color: yellow;
}
:dir(rtl) {
background-color: powderblue;
}
结果
规范
| Specification |
|---|
| HTML # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |
浏览器兼容性
Loading…