根据其他规则应用 CSS 规则 - RTL 特定样式

Question

介绍

我正在尝试建立一个可用于多种文化、具有不同阅读方向的网站。

为此，我只需dir="rtl"在我的根 HTML 元素上添加该属性。

我的问题是我有一些特定于一个方向或另一个方向的 CSS 规则（大多数情况下是边距或填充）。

使用属性选择器尝试失败

我认为我可以简单地使用属性选择器，但该dir属性仅设置在根元素上，所以这不起作用：

selector {
  &[dir="ltr"] {
    // LTR specific
  }

  &[dir="rtl"] {
    // RTL specific
  }
}

例如，在这个演示中，如果应用程序rtl在标准 中，则标题在右侧应该有 5px 的边距，如果在标准 中，则在左侧ltr。

其他想法

我注意到direction正确设置为rtl，有没有办法在 aCSS或Sass选择器中使用该规则？

编辑和精度

好像忘记了很重要的一点。我正在使用 Vue.js 构建网站，该dir属性在主组件 ( App) 中是 bind并且 RTL/LTR 特定的 CSS 规则可以在同一组件或其他自包含组件中。

Answer 1

您可以为所有内容设置 LTR 样式，并且只调整 RTL 的某些元素样式。这对你有用吗？

[dir="rtl"] {
    &selector {
        // RTL specific
    }

    &selectorN {
        // RTL specific
    }
}