如何仅用CSS隐藏其他元素，只显示指定data-src的div？

要实现只保留带有data-src="https://exampl4.com"属性的元素，同时隐藏包括.layout在内的所有其他元素，可通过以下CSS方案实现：

方案一（利用:has选择器，精准定位目标父元素） #

/* 隐藏页面所有顶级元素，确保初始状态无内容显示 */
body > * {
  display: none;
}

/* 将目标元素的祖先节点设置为内容容器，不渲染自身布局盒子 */
.layout,
.layout .card:has([data-src="https://exampl4.com"]) {
  display: contents;
}

/* 显示目标元素 */
[data-src="https://exampl4.com"] {
  display: block;
}

• 核心逻辑：先全局隐藏顶级元素，再通过display: contents让目标元素的祖先节点（.layout和对应.card）不生成自身盒子，仅传递子元素布局，最后单独显示目标元素，既隐藏了无关元素，又保证目标内容正常渲染。

方案二（兼容旧浏览器，依赖元素位置） #

如果需要兼容不支持:has选择器的浏览器，可根据目标元素所在的固定位置定位：

body > * {
  display: none;
}

.layout,
.layout .card:nth-child(4) {
  display: contents;
}

.layout .card:nth-child(4) > [data-src="https://exampl4.com"] {
  display: block;
}

• 核心逻辑：通过nth-child(4)直接定位到包含目标元素的.card（目标元素位于第4个.card内），其余逻辑与方案一一致，兼容性更强但依赖元素结构固定。

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