Question

我正在为我的大css（更少）样式添加rtl（从右到左）语言支持。我正在寻找一种方法来在.less文件中添加嵌套规则，就像分辨率

一样

对于屏幕尺寸，我可以这样做（为某些分辨率定义了@small变量），这非常舒服。

.my-class {
    width: 100px;

    @media @small {
        width : 50px;
    }

}

有没有办法做类似的事情，比如

@media direction(rtl) {

    /** my rtl styles goes here **/

}

当我可以为rlt语言的某些差异添加嵌套样式而不创建单独的样式时，它会在.less文件中非常有用。

我现在唯一发现的是CSS中的:dir伪，但目前仅支持Firefox。 https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

我需要IE9 +支持。

Answer 1

没有。方向性不是媒介的属性，它是文档及其内容的属性。

相反，您可以使用类:dir(rtl)之类的伪类，它通过继承直接或间接匹配任何设置了右向左方向性的元素。不幸的是，浏览器支持现在对于大多数用途来说太有限了（只有Firefox和Chrome，后者需要供应商前缀）。

您也可以使用[dir=rtl]等属性选择器，但它只匹配明确设置了dir属性的元素，而不仅仅是因为它们从家长。但是你可以将它与其他选择器结合起来。

举一个简单的例子，假设您只在dir（或body）元素上设置html属性，在不同的网页上设置不同，并且您希望使用所有页面的样式表相同，但在不同的页面上做一些不同的事情。然后你可以使用例如。

[dir=rtl] h1 { ... }

在从右到左页面的h1上设置一些规则。