如何只顯示整個頁面中的一個特定div？

如果我有這樣的事情：

<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）？

uj5u.com熱心網友回復：

您可以使用 [data-value: "exact value"] 在 CSS 中選擇具有資料屬性的元素。這是一個關于它的博客。

但是，您不能display: none在父元素上使用，因為它會覆寫子元素的顯示屬性。甚至不需要它，因為除了div您想要顯示的內容之外沒有其他內容。

.card > *{
  display: none;
  }
.card > [data-src="https://exampl5.com"]{
  display: flex;
 }

<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 5</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>

uj5u.com熱心網友回復：

您可以嘗試使用可見性隱藏父級：隱藏；. 為所需的子級創建新類，從父級中選擇元素并將屬性設定為可見性：可見；

.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>

uj5u.com熱心網友回復：

您可以隱藏每個元素，visibility: hidden然后使用 css-selector 僅顯示具有正確資料屬性的元素：

.card > div[data-src="https://exampl4.com"] {
    visibility: visible;
}

可以在此處找到有關屬性選擇器的詳細指南。

如果您不希望任何隱藏元素占用頁面的任何空間，請使用display: noneanddisplay: block而不是visibility.

這是一個例子visibility：

.card > div {
    visibility: hidden;
}
.card > div[data-src="https://exampl4.com"] {
    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">
    <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>

這是一個例子display：

.card > div {
    display: none;
}
.card > div[data-src="https://exampl4.com"] {
    display: block;
}

<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>

標籤：htmlcss

上一篇：選擇除第一個匹配的孩子之外的第nth-child(n)

下一篇：尺寸元素與視口成比例