: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

瀏覽器相容性

另見