相邻兄弟选择器（“+”）的巧妙运用

我的朋友 Richard 昨天遇到了一个有趣的问题。 他正在使用某种 API 返回一个大型公司列表。 每家公司都有 **文本**，大多数（但并非全部）也都有 **图片**。 他想使用图片（如果有），但如果显示了图片，他也不想显示文本。 解决方案必须是同时输出图片和文本，然后尝试在可能的情况下隐藏文本。

查看演示

以下是一个示例，展示了输出 HTML 可能的样子

<img src="images/image-110.png" alt="image" />
<span>Text</span>

<br /><br />
		
<img src="images/image-110.png" alt="image" />
<span>Text</span>
		
<br /><br />
		
<span>Text</span>

在这里，您可以看到前两个“组”都包含图片和文本，而最后一个组只包含文本。 **这是相邻兄弟选择器的理想场景！** 每个 CSS 极客的梦想！ 我们真正需要做的是只定位紧随图片之后的跨度。 我们可以做到这一点，并解决这个问题，如下所示

img {
	vertical-align: middle;
	z-index: 9999;
	position: relative;
}
span {
	z-index: 1;
}
img+span {
	margin-left: -110px;
}

相邻兄弟选择器语句的通俗解释是“查找紧随图片之后的跨度，并将它们移到左侧”。 独立存在的跨度不受影响，但前两个被移到了左侧。 负左边距负责移动，并且由于高 z-index 值，能够将文本塞到 **图片下方**。 相对定位实际上在这里是必需的，以启动 z-index 的实际工作。

我选择了负边距解决方案，因为在这种方法中，即使图片被关闭，仍然可以提供可访问的数据。 但是，如果要隐藏的文本太大而无法容纳在图片后面（或者图片是透明的），这将是一个问题。 您也可以考虑使用“visibility: hidden;” 或“display: none” 而不是负左边距，这绝对有效，但可访问性较差。

查看演示