Chrome浏览器中CSS伪类:dir()的替代实现方案是什么

Chrome 89及以上版本已经原生支持:dir()伪类，你提供的原代码可以直接正常运行。如果需要兼容更低版本的Chrome，可使用以下两种替代方案：

方案1：属性选择器（无JS成本，最常用） #

使用[dir="rtl"]属性选择器即可实现绝大多数场景的替代，该选择器兼容所有Chrome版本。它和原生:dir()的唯一差异是：

• :dir()会匹配元素实际渲染的文本方向，包括继承自父元素、浏览器根据内容自动识别的场景
• [dir="rtl"]仅匹配显式设置了dir="rtl" HTML属性的元素

如果需要覆盖父元素设置rtl、子元素继承方向的场景，可使用如下写法：

/* 匹配显式设置rtl的元素 + 继承rtl方向且未单独设置ltr的子元素 */
[dir="rtl"], 
[dir="rtl"] *:not([dir="ltr"]) {
  background-color: red;
}

方案2：JS辅助匹配（完全对齐:dir()逻辑） #

如果你的场景中存在没有显式设置dir属性、靠浏览器自动识别文本方向的元素，可通过JS给符合条件的元素加自定义类实现匹配：

// 页面加载完成后给所有实际渲染方向为rtl的元素加标记类
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('*').forEach(el => {
    if (getComputedStyle(el).direction === 'rtl') {
      el.classList.add('dir-rtl');
    }
  });
});

对应的CSS样式：

.dir-rtl {
  background-color: red;
}

该方案的匹配逻辑和原生:dir()完全一致，缺点是需要执行JS逻辑，页面动态新增的元素需要重新执行上述匹配逻辑才能正常命中样式。

内容的提问来源于stack exchange，提问作者mfadel