css - 嵌套选择器 - 可能吗？

Question

假设我有一个 div，里面有一堆东西:

<div id="Product">
 <ul id="List"></ul>
 <div class="Component"></div>
 <input type=... />
 ...
</div>

现在，我想设置各种样式，但仅限于在 #Product div 中。一般来说，我会这样做:

#Product #List {}
#Product .Component {}
#Product input {}

但是，我可以做这样的事情吗？

#Product {
    #List {}
    .Component {}
    input {}
}

Answer 1

嵌套 CSS 选择器对于标准 CSS 是不可能的，但是还有其他工具，比如 SASS , LESS , 和 XCSS这允许您按照您描述的方式编写规则。

这些工具通常“编译”成真正的 CSS，处理将嵌套的选择器语法转换成真正的 CSS 规则。