如何用CSS基于父类控制一次仅显示一个span元素

嘿，我来帮你搞定这个小问题！首先咱们理清楚核心需求：你希望依托父div的类名，只显示其中一个span元素，另一个保持隐藏状态。

你提到用div.class1 span.test-icon {display: none}会把两个span都隐藏，这大概率是因为你可能不小心设置了全局隐藏规则，或者存在样式冲突的情况。咱们换个更精准的写法，确保只控制目标元素：

方法1：默认隐藏所有，再单独显示目标 #

这种方式最稳妥，先统一隐藏所有test-icon类的span，再单独让你想展示的父div下的span显示出来：

/* 第一步：默认隐藏所有test-icon span */
span.test-icon {
  display: none;
}

/* 第二步：显示class1下的test-icon（如果想展示class2的，把这里改成div.class2即可） */
div.class1 span.test-icon {
  display: inline; /* 可根据需求换成inline-block、block等显示类型 */
}

方法2：直接隐藏单个目标元素 #

如果你只需要隐藏某一个父div下的span，直接写对应选择器就行，不需要全局隐藏：
比如想隐藏class1下的span，保留class2的：

div.class1 span.test-icon {
  display: none;
}

反过来，想隐藏class2下的span，保留class1的：

div.class2 span.test-icon {
  display: none;
}

为什么你之前的写法会隐藏两个？大概率是因为你可能先写了span.test-icon {display: none}这类全局隐藏规则，之后又叠加了div.class1 span.test-icon {display: none}，导致两个span都被隐藏。按照上面的写法，就能精准控制单个元素的显示状态啦。

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