CSS如何选中激活状态下.top-category的相邻ul及所有嵌套ul

原有写法仅能匹配激活状态下.top-category元素的紧邻兄弟ul，无法覆盖该ul内部嵌套的所有ul元素，只需要补充针对嵌套层级的匹配规则即可，完整可用的选择器组合如下：

/* 匹配与激活状态.top-category紧邻的第一层兄弟ul */
.top-category:active + ul,
/* 匹配该第一层ul内部所有嵌套层级的ul元素 */
.top-category:active + ul ul {
  /* 放置需要应用的样式代码 */
}

匹配逻辑说明 #

• .top-category:active + ul 保留原有逻辑，仅选中和激活态.top-category直接相邻的同级ul
• 新增的.top-category:active + ul ul 规则，会从已经匹配到的第一层ul出发，向下选中所有后代节点中的ul，无论嵌套层数多少，都能覆盖全
• 该写法不会误匹配.top-category其他非紧邻同级节点下的ul，完全贴合需求范围

注意事项：不要误用通用兄弟选择器~，比如写成.top-category:active ~ ul，这类写法会选中.top-category后方所有同级的ul节点，超出需求定义的选中范围。

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