推介会

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

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

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

尝试使用属性选择器失败

我以为我会简单地使用属性选择器 https://www.w3schools.com/css/css_attribute_selectors.asp但是dir属性仅在根元素上设置，因此这是行不通的：

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

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

例如，关于这个demo https://jsfiddle.net/y381ajap/2/，如果应用程序在，标题右侧应有 5px 的边距rtl或在左侧（如果是标准的）ltr.

其他想法

我注意到direction正确地设置为rtl，有没有办法在一个CSS or Sass选择器？

编辑和精度

看来我忘记了一个重要的点。我正在使用 Vue.js 构建网站，dir属性在主组件中绑定（App）和 RTL/LTR 特定 CSS 规则可以位于同一组件或其他独立组件中。

按照你的CSS代码，你可以用SASS来做到这一点at-root指示DEMO https://codepen.io/anon/pen/JMqppN。所以这：

#app {
  width: 300px;
  height: 100px;
  border: 1px solid red;

  h1 {
    @at-root {
      [dir="rtl"]#{&} {color: green}
    }

    @at-root {
      [dir="ltr"]#{&} {color: red}
    }
  }
}

它将编译为这个 css。

#app {
  width: 300px;
  height: 100px;
  border: 1px solid red;
}
[dir="rtl"]#app h1 {
  color: green;
}
[dir="ltr"]#app h1 {
  color: red;
}