如何在CSS3中根据子元素span的类名设置父元素li的文本颜色？

嘿，我来帮你解决这个问题！你想让<li>的文本颜色跟着它里面的<span>类名走，但你原来写的CSS父选择器写法是无效的——毕竟CSS目前还不支持原生的反向父选择器（就是你用的<这种写法）。不过有几种可行的办法能实现你的需求：

方案一：用CSS :has() 伪类（现代浏览器首选） #

:has()是CSS新增的伪类，能让我们选择包含特定子元素的父元素，完美匹配你的需求。只需要修改CSS代码如下：

.green { color: green; }
.gray { color: gray; }

/* 选择包含.green类span的li，设置文本颜色 */
li:has(.green) {
  color: green;
}

/* 选择包含.gray类span的li，设置文本颜色 */
li:has(.gray) {
  color: gray;
}

这个方案不用改HTML，现在Chrome、Firefox 121+、Edge等主流浏览器都支持:has()，如果你的项目不需要兼容特别旧的浏览器，这是最省心的选择。

方案二：调整HTML结构（最稳妥的兼容方案） #

如果需要兼容不支持:has()的旧浏览器，最简单的办法是把<li>里的文本直接放到对应的<span>标签里，这样span的颜色会直接应用到文本上：

修改后的HTML：

<ul>
  <li><span class="green">Car</span></li>
  <li><span class="green">Bike</span></li>
  <li><span class="gray">Plan</span></li>
  <li><span class="gray">Cycle</span></li>
</ul>

对应的CSS保持你原来的代码就行：

.green { color: green; }
.gray { color: gray; }

方案三：用JavaScript辅助（不能改HTML又要兼容旧浏览器时用） #

如果既不能修改HTML结构，又要兼容不支持:has()的浏览器，可以用JavaScript来动态给<li>添加对应的类名：

// 获取所有目标span元素
const spans = document.querySelectorAll('li > span.green, li > span.gray');

spans.forEach(span => {
  const parentLi = span.parentElement;
  // 给li添加和span相同的类名
  parentLi.classList.add(span.classList[0]);
});

之后你的CSS保持原来的写法就可以，<li>会因为添加了green或gray类，继承对应的文本颜色。

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