如何使用CSS为嵌套手风琴设置不同背景色？

当嵌套手风琴的主层级与内层使用了相同类名时，可通过CSS的层级选择器区分两者，实现不同背景色的设置，具体方案如下：

核心思路 #

利用CSS直接子元素选择器（>）和后代选择器的组合，精准定位不同层级的手风琴：

• 直接子元素选择器仅匹配父容器下的第一层手风琴（即主手风琴）
• 多层后代选择器匹配嵌套在内层的手风琴

代码示例 #

假设手风琴类名为 .accordion，外层容器为 .wrapper，对应的CSS代码如下：

/* 设置主手风琴背景色 */
.wrapper > .accordion {
  background-color: #f5f5f5;
}

/* 设置内层嵌套手风琴背景色 */
.wrapper .accordion .accordion {
  background-color: #e8e8e8;
}

如果存在三层及以上嵌套的手风琴，可继续扩展选择器：

/* 第三层手风琴背景色 */
.wrapper .accordion .accordion .accordion {
  background-color: #dcdcdc;
}

效果说明 #

通过上述选择器，能让主手风琴和各层嵌套手风琴拥有差异化的背景色，清晰区分层级结构，实现类似参考示例的视觉效果。

内容的提问来源于stack exchange，提问作者Sreehari Avikkal