如何只显示整个页面中的一个特定 div？答案

【问题标题】：How can I show only one specific div from an entire page?如何只显示整个页面中的一个特定 div？
【发布时间】：2022-11-02 00:10:05
【问题描述】：

如果我有这样的事情：

<div class="layout" background-color="#363636">
  <div class="card">
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl5.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>

除了仅使用 CSS 的属性 data-src="https://exampl4.com" 的元素之外，如何隐藏其他所有内容（包括布局 div）？

【问题讨论】：

如果你隐藏布局div 然后它里面的所有东西也会被隐藏，包括你想要显示的 div。根据定义，这就是 HTML 和 CSS 的工作方式。
您不能隐藏父 div、布局和显示该 div 内的任何子级。如果您只想显示您提到的特定卡片，您可以像这样使用 css： .card > div:not([data-src="exampl4.com"]) { display: none; }

标签： html css web

【解决方案1】：

您可以使用隐藏父级可见性：隐藏；和可见性：可见；对于想要的孩子

.layout{
  visibility : hidden;
}

.layout > .card-visible {
  visibility: visible;
}

<div class="layout" background-color="#363636">
  <div class="card">
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div class="card card-visible">
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl5.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div class="card">
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>

【讨论】：