CSS隐藏li内除Font Awesome图标外内容无效的解决方法

你的CSS选择器逻辑存在根本错误，同时没有考虑到裸文本节点的选择限制：

• li:not(i)的实际匹配规则是：选中所有标签名为li、且自身不是<i>标签的元素。但<li>元素本身的标签名就是li，永远不可能是i标签，因此这个选择器等价于直接选中所有<li>，会把li连同内部的图标、文本全部隐藏，完全不符合预期。
• 你的HTML结构中，Home这类文本是直接放在li下的裸文本节点，CSS没有直接选中裸文本节点的语法，无法通过常规选择器单独给这类文本设置隐藏样式。

你可以根据是否愿意调整HTML结构，选择对应方案：

方案1：不改动现有HTML结构 #

利用CSS属性的继承覆盖特性实现，不需要额外套标签，推荐用字号控制的方案，不会产生多余占位：

/* 替换为你需要的小屏幕响应式断点即可 */
@media (max-width: 768px) {
  li {
    /* 把li下直接存在的文本字号设为0，实现隐藏 */
    font-size: 0;
  }
  li i {
    /* 单独给Font Awesome图标设置正常显示的字号，覆盖父级的0字号 */
    font-size: 18px; /* 替换为你实际需要的图标大小 */
  }
}

如果需要保留元素的原始布局占位，也可以用visibility属性实现：

@media (max-width: 768px) {
  li {
    visibility: hidden;
  }
  li i {
    visibility: visible;
  }
}

方案2：调整HTML结构（更推荐） #

给导航文本单独套一层语义标签，后续控制样式更精准，不会有兼容副作用：
首先修改HTML结构，给文本加包裹标签：

<ul>
  <li class="first"><i class="fa-brands fa-instagram"></i><span class="nav-text">Home</span></li>
  <li class="second"><i class="fa-brands fa-instagram"></i><span class="nav-text">Home</span></li>
  <li class="first"><i class="fa-brands fa-instagram"></i><span class="nav-text">Home</span></li>
  <li class="first"><i class="fa-brands fa-instagram"></i><span class="nav-text">Home</span></li>
  <li class="first"><i class="fa-brands fa-instagram"></i><span class="nav-text">Home</span></li>
</ul>

之后写CSS直接隐藏文本标签即可，逻辑最清晰：

@media (max-width: 768px) {
  li .nav-text {
    display: none;
  }
}

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