:dir() 是 CSS 伪类，根据元素 dir 属性或继承的方向值匹配 ltr/rtl，用于编写方向敏感样式；它不自动布局，仅提供方向条件，需配合逻辑属性（如 margin-inline-end）或手动定义物理属性规则。
dir() 伪类在 CSS 中的实际作用是什么
它不是用来“自动调整间距”的魔法开关，而是根据元素的 dir 属性（或继承自父级/浏览器默认）匹配方向性，从而让开发者写两套规则：一套给 ltr（如英文），一套给 rtl（如阿拉伯语、希伯来语）。所谓“自动”，仅指匹配行为自动，布局逻辑仍需你手动定义。
常见错误现象：div:dir(rtl) { margin-left: 16px; } 写完发现没生效——大概率是该 div 没设 dir="rtl"，也没继承到有效方向值；:dir() 不会读取语言（lang）、字体、内容文字本身，只看 dir 属性或文档根节点的 dir。
-
:dir(rtl)匹配的是元素自身或最近祖先显式声明的dir="rtl"，不是靠内容猜 - HTML 根节点没写
dir时，浏览器按ltr默认，所以:dir(ltr)可能意外命中大量无声明元素 - 不支持嵌套方向切换：子元素设了
dir="ltr"，但父元素是:dir(rtl)，此时子元素的:dir(ltr)才生效，父级规则不会“泄漏”
什么时候该用 :dir()，而不是 [dir="rtl"]
:dir() 是语义化选择器，它能捕获继承来的方向（比如 下所有未覆盖的子元素），而 [dir="rtl"] 只匹配显式写了属性的元素。实际项目中，绝大多数 RTL 支持靠根节点 dir 控制，所以 :dir() 更贴近真实场景。
性能影响极小，现代浏览器已优化该伪类匹配逻辑；兼容性方面，Chrome 87+、Firefox 49+、Safari 15.4+ 支持，Edge 基于 Chromium 后也支持。IE 完全不支持，但已无维护必要。
立即学习“前端免费学习笔记（深入）”；
- 用
:dir(rtl)替代[dir="rtl"]，尤其当方向由根节点统一控制时 - 避免混用：不要同时写
[dir="rtl"]和:dir(rtl)做同一件事，容易误判优先级和覆盖关系 - 注意 SSR/SSG 场景：服务端渲染时若未正确注入
dir属性，:dir()规则可能完全不触发
:dir() 配合 margin / padding 的典型写法误区
很多人以为加了 :dir(rtl) { margin-left: 0; margin-right: 16px; } 就算完成 RTL 适配，其实漏掉了关键点：逻辑属性才是更健壮的解法。物理属性（margin-left）在 :dir() 下可工作，但难维护、易翻车。
例如：一个按钮在 LTR 下右留白，在 RTL 下应左留白。用物理属性要写两套；用逻辑属性只需 margin-inline-end: 16px;，它在 LTR 下等于 margin-right，在 RTL 下自动映射为 margin-left，且与 :dir() 无关——它自己就能响应方向。
- 优先用
margin-inline-start/margin-inline-end等逻辑属性，比依赖:dir()更简洁可靠 - 如果必须用
:dir()控制物理属性，请确保对应元素有明确dir值，且测试时打开浏览器 DevTools 查看 computeddirection - 慎用于动画或 transition：
:dir()切换不会触发重排重绘，除非你手动改 DOM 的dir属性并触发布局
如何验证 :dir() 是否真正生效
最直接的方式不是看页面效果，而是打开浏览器 DevTools，选中目标元素，在 Styles 面板里搜索 :dir，看对应规则是否被标记为 “matched”；如果灰掉或显示 “inactive”，说明当前元素不满足匹配条件。
常见验证失败原因：元素没 dir 属性、父级没传下来、用了 dir="auto"（此时浏览器按首字符判断，但 :dir() 不匹配 auto）、或者用了 Shadow DOM 且未穿透设置。
- 临时加
style="border: 2px solid red;"到:dir(rtl)规则里，肉眼确认是否上色 - 在控制台执行
getComputedStyle(document.querySelector('your-selector')).direction，看返回值是"ltr"还是"rtl" - 别依赖语言检测库或
lang属性推断方向——:dir()和它们完全无关
:dir() 本身，而在文本流、表单控件、图标朝向、时间格式这些需要协同处理的环节；只改 CSS 选择器，解决不了根本问题。 
