如何仅使用CSS在无ID或类的情况下隐藏元素？无法修改HTML时如何隐藏指定列表项？

嘿，咱们逐个解决你的两个CSS问题——都是关于不用ID或类选择器隐藏元素的场景，这在没法修改HTML的时候太常见了！

这里有几种实用的方法，完全不需要依赖ID或类：

• 直接针对元素类型隐藏：如果要隐藏的是某一类元素（比如所有<p>或<div>），直接用元素选择器配合隐藏属性即可。注意display: none会彻底移除元素的占位空间，而visibility: hidden会保留空间只是隐藏内容，按需选择：

  /* 隐藏所有段落 */
  p {
    display: none;
  }
  

• 用结构伪类定位特定位置的元素：如果目标元素在父容器中有固定位置，用:nth-child()、:first-child、:last-child这类伪类精准定位。比如隐藏<ul>下的第二个列表项：

  ul :nth-child(2) {
    display: none;
  }
  

• 借助元素的独特属性定位：如果目标元素（或其子元素）有独一无二的属性（比如href、aria-controls、type等），用属性选择器匹配。比如隐藏所有指向#account的链接：

  [href="#account"] {
    display: none;
  }
  

• 相邻兄弟选择器定位后续元素：如果目标元素紧跟在某个可识别的元素后面（比如第一个元素是<h1>），用+选择器。比如隐藏紧跟在<h1>之后的第一个<p>：

  h1 + p {
    display: none;
  }
  

先把你的HTML代码贴出来方便对照：

<ul> 
  <li class="active"> 
    <a aria-controls="menu" href="#menu">Menu</a> 
  </li> 
  <li> 
    <a aria-controls="account" href="#account">Account</a> 
  </li> 
</ul>

给你三个靠谱的解决方案，兼容性和实用性各有侧重：

方案1：相邻兄弟选择器（兼容性最好，推荐） #

第一个<li>带有active类，我们可以利用它定位后面的兄弟元素：

li.active + li {
  display: none;
}

这个选择器会精准选中紧跟在带active类的<li>之后的那个<li>，正好就是你要隐藏的Account项，完全匹配你的HTML结构，而且所有现代浏览器和旧版浏览器都支持。

方案2：:nth-child()结构伪类 #

直接定位<ul>下的第二个子元素：

ul li:nth-child(2) {
  display: none;
}

:nth-child(2)会选中父元素（这里是<ul>）的第二个子元素，因为你的<ul>里只有<li>，所以这个方法也非常可靠，兼容性也很好。

方案3：:has()伪类（更灵活，但兼容性稍差） #

如果Account的链接有独特属性（比如href="#account"），可以用:has()伪类选中包含这个链接的父<li>：

li:has(a[href="#account"]) {
  display: none;
}

:has()是CSS3的新特性，能直接选中包含指定子元素的父元素，非常灵活，但要注意，一些旧版浏览器（比如IE系列）不支持它，如果你的项目不需要兼容旧浏览器，这个方法会更通用，哪怕列表结构变化也能定位到目标。

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