如何使用CSS选择器选中两层嵌套ul之后紧邻的p元素并设置样式

问题原因 #

你写的.class ul ul + p不生效的核心原因是：相邻兄弟选择器+只能匹配同一个父元素下，紧挨着前一个元素的同级元素。你代码里的两层嵌套ul是放在上层ul的li内部的，和外面的p根本不是同级节点，自然匹配不到。

解决方案 #

现在主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）都支持CSS:has()选择器，直接匹配「内部包含嵌套ul的外层ul」，再选中它后面紧邻的p即可：

/* 替换你之前写的无效的ul ul + p规则即可 */
.class ul:has(ul) + p { 
  color:green;
}

如果需要兼容不支持:has()的旧版本浏览器，可以手动给包含嵌套列表的外层ul加一个自定义类名，比如has-nested-ul，再写选择器：

.class ul.has-nested-ul + p {
  color: green;
}

对应的HTML修改示例：

<ul class="has-nested-ul">
  <li>Item a</li>
  <li>Item b
    <ul>
      <li>Item c (嵌套列表，对应CSS可正常生效)</li>
      <li>Iten d (预期显示为紫色)</li>
    </ul>
  </li>
</ul>

完整生效代码示例 #

.class ul + p {
  color:red;
}

.class ul ul {
  color:purple;
}

/* 新增规则，匹配包含嵌套ul的外层ul之后的p */
.class ul:has(ul) + p { 
  color:green;
}

HTML部分不需要修改，和你原来的代码一致即可，最终效果：

• 嵌套列表里的文字显示为紫色
• 第一层带嵌套的ul之后的p显示为绿色
• 第二层单层ul之后的p显示为红色

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