:dir()

CSS 中的 :dir() 伪类允许根据语言方向选择元素，语言方向在 HTML 标记中确定。 语言在文档中实际上只有两种流动方向，即从左到右和从右到左。 可以将其视为一种根据不同的语言方向区分元素的方式。

<div class="item">
	<!-- Content -->
</div>
<div class="item" dir="rtl">
	<!-- Content -->
</div>

.item:dir(rtl) {
  background: red;
  color: #fff;
}

此伪类只接受一个值，如果输入多个值，将返回空值。

查看 Geoff Graham 编写的 Pen :dir 伪选择器 (@geoffgraham) 在 CodePen 上。

:dir(rtl) vs. [dir=rtl]

我们还可以使用匹配查询选择器根据元素的语言方向选择元素

.item[dir=rtl] {
  background: red;
  color: #fff;
}

这确实有效，但与 :dir(rtl) 不同，它只根据严格定义在 HTML 标记中的内容选择元素。 反过来，:dir(rtl) 将嗅探用户代理的语言首选项，并在没有在 HTML 中明确说明的情况下选择元素。

这很重要，因为没有明确说明语言方向的元素将继承包含该方向的最近祖先元素的 dir 属性。 这可能导致使用 [dir=rtl] 选择比预期更多元素的情况。

浏览器支持

更多信息

• 选择器级别 4 规范
• Chromium 问题 #576815
• WebKit 错误 #64861
• Mozilla 文档
• Microsoft Edge 功能请求
• Chromium 平台状态
• PostCSS :dir() 填充