有没有办法为某个选择器确定css规则的范围

我目前正在写下所有的css选择器，但这看起来有点难看

.selector1 .selector2 .item1 {
    ...
}

.selector1 .selector2 .item2 {
    ...
}

.selector1 .selector2 .item3 {
    ...
}

这样做不是更好吗：

.selector1 .selector2 {

    .item1 {
       ...
    }

    .item2 {
        ...
    }

    .item3 {
        ...
    }
}

---

我知道样式标记中的作用域属性，但对我来说，这是另一种内联方式。有人知道这种范围界定是否可用吗？

使用Sass！他们实现了它：）

CSS不支持这种语法，但有两种流行的CSS预编译器：和。除了编译器，几乎没有任何区别。SASS使用基于Ruby的编译器，LESS使用JavaScript编译器，在我看来，JavaScript编译器更容易处理，因为我不是在开发Ruby，而是在开发JavaScript

此外，您可以像这样在HTML代码中直接嵌入less文件

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

当然，您需要可以从LESS网站下载的JavaScript编译器。在你启动一个网站之前，你应该把这个小文件编译成普通的CSS

---

您应该看看。

使用sass之类的预处理器，可以用这种方式嵌套规则：请参阅Try