如何用CSS隐藏无ID/Class的HTML元素？含指定子元素隐藏场景

当然可以用CSS隐藏没有ID或Class属性的元素！CSS的选择器体系非常灵活，除了大家常用的类选择器（.class）和ID选择器（#id），还有很多基于元素结构、位置或内容的选择器，完全可以定位到这些没有标识属性的元素。

一、通用的定位方法（针对无ID/Class元素） #

• 标签选择器：直接用元素标签定位，比如div { display: none; }，不过这个会隐藏所有div，适合批量操作但不够精准。
• 子选择器/后代选择器：通过元素的层级关系定位，比如#parent > div表示选中ID为parent的元素下的直接子div，#parent div则选中所有后代div。
• 伪类选择器：比如:first-child、:nth-child(n)、:last-child，可以根据元素在父容器中的位置定位。
• 兄弟选择器：+（相邻兄弟）或~（通用兄弟），比如span:first-child + span选中第一个span的下一个相邻span。
• 内容选择器（CSS草案）：:contains("文本内容")，可以根据元素内的文本精准匹配，不过目前属于CSS Selectors Level 4的草案，现代浏览器大多支持，但兼容性不如结构选择器。

二、针对你的具体场景的解决方案 #

你的HTML结构是：

<div id="example">
  <div>
    <span>First</span>
    <span>Second</span>
  </div>
</div>

需要隐藏无ID的div下内容为“Second”的第二个span，这里有几种精准的CSS写法：

方法1：基于元素位置（最兼容） #

利用:nth-child(2)定位父容器中的第二个span：

#example > div > span:nth-child(2) {
  display: none;
}

• 解释：#example > div先定位到ID为example的div下的直接子div（就是那个无ID的div），然后> span:nth-child(2)选中这个div里的第二个span元素，不管内容是什么，只要位置是第二个就会被隐藏。

方法2：基于文本内容（精准匹配） #

如果要确保只隐藏内容为“Second”的span，可以用:contains()：

#example > div > span:contains("Second") {
  display: none;
}

• 注意：这个选择器目前在Chrome、Firefox等现代浏览器中支持，但旧版浏览器可能不兼容，如果需要极致兼容性，更推荐方法1或方法3。

方法3：基于相邻兄弟关系 #

利用第一个span的相邻兄弟选择器定位第二个span：

#example > div > span:first-child + span {
  display: none;
}

• 解释：span:first-child选中无ID div里的第一个span（内容为“First”），+ span则选中它的下一个相邻span，也就是目标元素。

其实只要灵活组合CSS选择器，就算元素没有ID或Class，也能轻松定位并隐藏，不用额外修改HTML结构~

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