如何为包含特定类嵌套<div>的<li>元素设置样式？

你当前的CSS选择器li > .item-wide只能选中<li>的直接子元素中带有.item-wide的元素，但你的.item-wide是嵌套在另一个<div>里的，这个选择器其实没命中目标（可能你测试时的结构有差异）。更关键的是，你要给<li>本身加样式，而非它内部的<div>，这时候得用CSS的:has()伪类。

:has()可以选择包含指定后代元素的父元素，正好满足你的需求——选中所有内部任意位置存在.item-wide的<li>。

修改后的CSS代码：

ul{
   display: flex;
   flex-wrap: wrap;
   gap: 20px
}

/* 给包含.item-wide的li加样式 */
li:has(.item-wide) {
  /* 示例样式，可根据需求修改 */
  background-color: #f0f9ff;
  border: 1px solid #3b82f6;
  padding: 8px;
}

/* 如果你需要给.item-wide本身加样式，用这个（去掉>，因为不是直接子元素） */
li .item-wide{
  color: green;
}

对应的HTML结构不变：

<ul>
  <li> Some text </li>
  <li> Some text </li>
  <li> Some text </li>
  <li> <div class="other"><div class="item-wide">Some text</div></div> </li>
  <li> Some text </li>
</ul>

注意事项 #

• :has()是CSS选择器Level 4的特性，目前Chrome、Firefox 121+、Safari等主流浏览器都已支持；如果需要兼容旧版浏览器，只能通过JavaScript遍历元素，给符合条件的<li>手动添加类名来实现。

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