嵌套选择器 - 可能吗？

假设我有一个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 {}
}

使用标准 CSS 无法嵌套 CSS 选择器，但还有其他工具，例如SASS, LESS, and XCSS它允许您按照您所描述的方式编写规则。

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