嵌套选择器 - 可能？ [英] Nesting selectors - possible?

问题描述

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

Suppose I have a div with a bunch of stuff inside:

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

现在，我想为各种东西设计风格，但只有在 #Product div 。一般来说，我会这样做：

Now, I want to style various things, but only when inside of the #Product div. Generally, I would do:

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

但是，我可以这样做？

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

推荐答案

p>使用标准CSS无法使用嵌套CSS选择器，但还有其他工具，例如 SASS ， LESS 和 XCSS

Nesting CSS selectors is not possible with standard CSS, but there are other tools like SASS, LESS, and XCSS which allow you to write rules in the way you're describing.

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

These tools generally "compile" into real CSS which handles converting the nested selector syntax into real CSS rules.

这篇关于嵌套选择器 - 可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！