:dir()伪类需依赖dir属性显式设置或浏览器自动推断RTL/LTR方向才生效，单独使用无效；它匹配计算后的方向值，比[dir="rtl"]更健壮但兼容性较差（Safari≤15.3不支持）。
dir()伪类在CSS中怎么写才生效
必须配合dir属性或浏览器自动推断方向，单独写:dir(ltr)或:dir(rtl)不会触发样式——CSS本身不读取语言或locale，只看元素是否显式声明了文本方向。
常见错误是给<html>加lang="ar"就以为:dir(rtl)会生效，结果样式完全没应用。lang属性和dir属性语义不同，前者表语言，后者表书写方向。
- 正确做法：在根元素或目标元素上加
dir="rtl"（如<html dir="rtl">） - 也可依赖浏览器自动推断：当
dir未设置但元素含强RTL字符（如阿拉伯字母、希伯来字母），部分浏览器（Chrome/Firefox）会启用:dir(rtl)匹配 - Safari对自动推断支持较弱，生产环境务必显式设置
dir属性
:dir()和[dir="rtl"]写法区别在哪
:dir(rtl)匹配的是**计算后的方向值**，而[dir="rtl"]只匹配HTML中**字面写了dir="rtl"的元素**。两者行为差异直接影响组件复用和动态场景。
比如React中用dir={direction}动态绑定，若direction为null或undefined，属性不会被渲染，此时[dir="rtl"]完全失效，但:dir(rtl)仍可能因内容字符触发（取决于浏览器）。
立即学习“前端免费学习笔记（深入）”；
-
:dir(rtl)更健壮：能覆盖浏览器自动推断、继承来的方向、甚至dir="auto"的计算结果 -
[dir="rtl"]更可控：只响应明确声明，适合调试或需要100%确定性的场景 - 不要混用：比如
button:dir(rtl) [dir="rtl"]这种组合既难维护，又容易因优先级或匹配逻辑出错
Flex/Grid布局里用:dir()调整主轴方向要注意什么
直接对flex-direction或grid-auto-flow用:dir()切换，看似简洁，实则容易破坏语义流与可访问性顺序——视觉顺序变了，但DOM顺序和屏幕阅读器遍历顺序没变。
例如div:dir(rtl) { flex-direction: row-reverse; }会让按钮从右到左排列，但如果按钮本身有tabindex或表单逻辑依赖左→右流程，用户按Tab键的焦点顺序就和视觉不符。
- 优先用
dir属性驱动整体布局方向，而不是局部反转；让flex-direction: row在LTR下自然左→右，在RTL下由dir="rtl"隐式触发右→左（需配合text-align: end等） - 避免在子元素上单独用
:dir()翻转flex主轴，除非你已确认该容器内无交互、无焦点管理需求 - 测试时用键盘Tab+屏幕阅读器验证，不能只看页面渲染效果
伪类:dir()的兼容性和降级方案
Chrome 87+、Firefox 83+、Safari 15.4+支持:dir()，但旧版Safari（≤15.3）和所有IE完全不识别，且无polyfill可用——它属于CSS选择器引擎底层能力，无法用JS模拟。
这意味着：如果项目需支持iOS 15.2及更早设备，或者企业内网还跑着旧版MacOS Safari，:dir()就得放弃，改用[dir]属性选择器或JS动态加class。
- 安全写法：
[dir="rtl"] .button { margin-inline-start: 0; }兼容IE11+ - 渐进增强：先写
[dir="rtl"]兜底，再在后面追加:dir(rtl)覆盖（现代浏览器会覆盖前者） - 构建时注意：PostCSS插件如
postcss-dir-pseudo-class只能转译语法，不能补兼容性，别被“支持”二字误导
真正麻烦的不是写法，而是当设计要求“RTL下图标在文字右侧”这种细节时，:dir()看起来是解药，但一旦要考虑老Safari或SSR首屏闪动，就得回到dir属性+CSS变量+少量JS判断的老路。方向感知这事，从来不是加个伪类就完事的。
