:dir()

基线 2023

最新可用

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

The :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 属性确定。其他文档类型可能具有不同的方法。

语法

:dir() 伪类需要一个参数，表示您要定位的文本方向性。

css
:dir([ltr | rtl]) {
  /* ... */
}

参数

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
选择器级别 4
# the-dir-pseudo

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅