在 CSS 中选择子项答案

【问题标题】：Selecting sub items in CSS在 CSS 中选择子项
【发布时间】：2021-12-28 08:07:40
【问题描述】：

我有以下 HTML：

<div class='main'>
  <div id='image-div'></div>
  <div class='item-div'></div>
  <div class='item-div'></div>
</div>

main div 中的 div 是通过 JS 动态创建的。因此，为了在创建后使用 JS 更改某些样式，我创建了另一个类“main-light”并使用 jquery 的 addClass 和 removeClass，我可以更改这些内部 div 的设计。这也让我在主 div 中做 1 个 addClass 并在页面内更改很多 css。

这是新类的 CSS 代码：

.main-light div#image-div, .main-light div.item-div {some css code}

问题： 我们可以更优雅地编写 css 选择器，而不用在每个项目前加上“.main-light”吗？

上面的例子很短，但我实际的 css 文件有很多这样的元素和选择器，而且它变得相当大。

希望我说清楚了，有人可以帮助我。

谢谢

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您的尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet
不，你不能用 CSS 做到这一点，看看 SASS 然后你可以嵌套选择器（然后转换成普通的 css，就像你已经拥有的那样）
链接：SASS: Syntactically Awesome Style Sheets - Guide
我猜你可以做到#image-div, .main-light .item-div {}

标签： javascript html jquery css

【解决方案1】：

您可以在 css 中使用 nth-child 选择器。查看以下示例：

.main > div:nth-child(1) {},
.main > div:nth-child(2) {},
.main > div:nth-child(3) {}

【讨论】：