:dir()

Baseline 2023
新推出

自 ⁨2023 年 12 月⁩起,此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

: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() 伪类需要一个参数,表示您想要定位的文本方向性。

ltr

定位从左到右的元素。

rtl

定位从右到左的元素。

示例

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

浏览器兼容性

另见