演示

Question

演示

我正在尝试建立一个多种文化的网站，阅读方向不同。

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

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

使用属性选择器

尝试失败

我虽然可以简单地使用the attribute selector，但dir属性仅在根元素上设置，所以这不起作用：

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

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

例如，在此demo上，如果应用程序位于rtl，则标题右边的边距应为5px，如果位于标准ltr，则标题应位于左侧。< / p>

其他想法

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

编辑和精度

似乎我忘记了一个重要的观点。我正在使用Vue.js构建网站，dir属性在主要组件（App）中绑定，而RTL / LTR特定的CSS规则可以在同一个组件中或在其他自我中包含的组件。

Answer 1

根据您的css代码，您可以使用SASS at-root指令DEMO执行此操作。所以这个：

#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;
}

Answer 2

您可以设置LTR的所有样式，并仅调整RTL的某些元素样式。这项工作可能适合你吗？

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

    &selectorN {
        // RTL specific
    }
}

Answer 3

可能你走错了方向。

大多数情况下，您可以自动实现此目的，无需特定的选择器。

保证金，例如：

只需为左右边距设置它。浏览器会为您选择正确的

＆＃13;

#app {
    width: 300px;
    background: tomato;
    margin: 10px;
}

h1 {
    margin-left: 15px;
    margin-right: 5px;
}

＆＃13;

<div id="app" dir="ltr">
  <h1>
    margin left 15
  </h1>
</div><div id="app" dir="rtl">
  <h1>
    margin right 5
  </h1>
</div>

＆＃13;

Answer 4

在下面的scss中使用以获取预期的输出

#app {
  width: 300px;
  height: 300px;
  background: red;

  &[dir="ltr"] h1{
    margin-left: 10px;
  }

  &[dir="rtl"] h1 {
    margin-right: 10px;
  }
}

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

演示

使用属性选择器

其他想法

编辑和精度

4 个答案: