社交媒体li标签悬停背景色按i类设置的实现问题

你遇到的核心问题是CSS目前没有原生的父选择器，没办法直接通过<i>的类来反向选中它的父元素<li>。不过有几种可行的方案来实现你的需求，我给你逐一拆解：

方案1：直接给目标<li>添加类（最稳妥，兼容性拉满） #

既然你明确知道哪个<li>对应Facebook图标，直接给这个<li>加个专属类，比如facebook-item，然后针对性写hover样式就好：

修改后的HTML： #

<div>
<ul class="social_bookmarks">
<li class="facebook-item">
<a href="https://www.facebook.com/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>

对应的CSS： #

body { color: black; }
.social_bookmarks { height: 30px; z-index: 150; -webkit-backface-visibility: hidden; margin: 0 0 0 -9px; }
/* 只给带facebook-item类的li设置hover背景色 */
.social_bookmarks li.facebook-item:hover { background: red; }

这个方法所有浏览器都支持，完全没有兼容性顾虑，是最推荐的方案。

方案2：使用CSS的:has()伪类（现代浏览器适用） #

如果不想改动HTML结构，可以用CSS的:has()伪类——它允许我们选择包含特定子元素的父元素。不过要注意，这个特性在旧版浏览器（比如IE）不支持，但Chrome、Firefox、Edge等最新版本的现代浏览器都已经支持了。

修改后的CSS： #

body { color: black; }
.social_bookmarks { height: 30px; z-index: 150; -webkit-backface-visibility: hidden; margin: 0 0 0 -9px; }
/* 选中包含.fa-facebook-f子元素的li，设置hover样式 */
.social_bookmarks li:has(i.fa-facebook-f):hover { background: red; }

方案3：用JavaScript动态添加类（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以用JS来遍历元素，给符合条件的<li>动态添加类：

JavaScript代码： #

// 获取所有.social_bookmarks下的li元素
const socialItems = document.querySelectorAll('.social_bookmarks li');
socialItems.forEach(item => {
  // 检查当前li里是否存在.fa-facebook-f的子元素
  if (item.querySelector('.fa-facebook-f')) {
    item.classList.add('facebook-item');
  }
});

之后再用方案1里的CSS样式就能生效了。

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