[dir="rtl"]仅匹配显式设置该属性的元素，不继承、不推断方向；:dir(rtl)则基于浏览器计算出的实际方向（含继承和内容推断）精准匹配所有RTL环境下的元素。

为什么直接写 [dir="rtl"] 会漏掉很多元素

很多人在 HTML 的 上设了方向，就以为所有子元素都能被 [dir="rtl"] 匹配到——其实不会。这个属性选择器只认“自己写了 dir="rtl"”的元素，不继承、不推断。比如一个没显式设 dir 的 ，哪怕它在 里，[dir="rtl"] span 也选不到它。

:dir(rtl) 不一样：它读的是浏览器最终计算出的方向值（来自 dir 属性或 direction CSS 属性，甚至内容本身），自动继承、自动生效。所以真正该用的是：

• p:dir(rtl) { text-align: right; } —— 所有实际处于 RTL 环境的段落都命中
• .icon:dir(rtl) { transform: scaleX(-1); } —— 图标在任意 RTL 上下文中自动翻转
• 避免混用：[dir="rtl"] .btn 和 .btn:dir(rtl) 同时存在，容易因优先级或覆盖顺序出错

:dir(rtl) 配合逻辑属性才是最小改动方案

单独用 :dir(rtl) 写两套物理属性（比如 margin-left / margin-right）不是不行，但维护成本高、易漏、难测试。更直接的做法是：把方向适配逻辑交给 CSS 自己处理。

逻辑属性天然响应方向，不需要 :dir() 就能工作。但二者可以互补：

• 用 margin-inline-end: 12px 替代 margin-right → LTR 下生效于右侧，RTL 下自动作用于左侧
• 对必须用物理属性的地方（如 transform、float），才用 :dir(rtl) 做条件覆盖
• 例如：.sidebar:dir(rtl) { float: inline-start; } 比 float: left + float: right 更简洁

SSR/静态站点中 :dir() 失效的常见原因

服务端渲染时，如果 HTML 没带 dir 属性（比如默认用英文模板生成，多语言切换靠客户端 JS 补上），那么 :dir(rtl) 规则根本不会匹配——因为服务端算出来的方向是 ltr，CSS 已经生成完毕。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

解决办法很实在：

• 确保 SSR 模板根据当前语言主动注入 或
• 不要依赖 JS 运行后才加 dir——那样 CSS 已加载完成，:dir() 规则早已失效
• 若必须动态切换，用 document.documentElement.setAttribute('dir', 'rtl') 后，需确认样式表已预置好 :dir(rtl) 规则（不能靠 JS 插入 style 标签临时补）

第三方组件库里的 :dir() 陷阱

像 Bootstrap、Ant Design 这类库，默认按 LTR 设计：图标在左边、清除按钮在右边、表单标签 float: left……它们几乎不会主动监听 :dir() 或用逻辑属性。

强行在根节点加 dir="rtl"，会导致：

• 输入框的清除按钮跑到右边，但图标没翻转，视觉错位
• margin-left: 8px 变成“右边距”，文字和图标间距反向崩坏
• 某些组件内部用 getComputedStyle 读 marginLeft 做计算，结果拿到错误值

真正可行的路只有一条：只在你完全可控的内容区域（比如

）加 dir="rtl"，并用 .content-area:dir(rtl) 覆盖关键样式；第三方组件保持原样，或封装一层 wrapper 显式重置方向相关属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！