基于其他规则应用 CSS 规则 - RTL 特定样式

Question

演示

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

为此，我只需在根 HTML 元素上添加

dir="rtl"

属性即可。

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

尝试使用属性选择器失败

我虽然可以简单地使用 属性选择器，但是

dir

属性仅在根元素上设置，所以这不起作用：

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

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

例如，在此 demo 中，如果应用程序位于

rtl

中，则标题应在右侧有 5 像素的边距；如果应用程序处于标准

ltr

中，标题应在左侧有 5 像素的边距。

其他想法

我注意到

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

使用下面的scss来获得预期的输出

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

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

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

Answer 4

您可以使用新的 CSS

:dir()

伪类。

div:dir(rtl) {
    color: red;
}

div:dir(ltr) {
    color: green;
}

它与使用

[dir]

有两种不同之处（根据此参考文献）：

• 它与从具有

  dir

  属性的祖先继承的方向匹配
• 它与使用

  dir=auto

  计算出的方向匹配（它从具有强方向性的文本中的第一个字符确定方向性）

Answer 5

可能你走错了方向。

大多数时候，您可以自动实现这一点，不需要特定的选择器。

保证金，例如：

只需将其设置为左边距和右边距即可。浏览器将为您选择正确的一个

#app {
    width: 300px;
    background: tomato;
    margin: 10px;
}

h1 {
    margin-left: 15px;
    margin-right: 5px;
}

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