使用 pure css 隐藏元素的第一个子元素以外的所有内容

Question

我试图在 classa class 元素的第一个子元素之后隐藏所有其他子元素。

div.classa {
    display:none;
}
div.classa:first-child {
    display:block !important;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

如何使用纯 css 实现此目的。

Answer 1

你可以这样做：

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content1</div>
    <h3>xyz</h3>
    <div class="classa">more content2</div>
    <h3>header3</h3>
    <div class="classa">another content3</div>
</div>

Css:

.content > .classa:not(:nth-of-type(2)) {
    display:none;
}

Answer 2

您可以尝试 :not 伪 class — https://developer.mozilla.org/en-US/docs/Web/CSS/:not

参见 this answer

Answer 3

您的代码中的问题是您想要隐藏第一个 .classa，但第一个 .classa 不是第一个 [=30] =] 在 .content 中，h3 是第一个 child。

因此，作为 :not() 伪 class 的替代方法，您可以使用 nth-of-type(n+2)。它将 select 所有具有相同类型的元素，除了第一个。

div.classa:nth-of-type(n+2) {
    display:none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Answer 4

如果你想support IE8, then your only option is general sibling selector:

div.classa ~ .classa {
    display: none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Answer 5

您的案例有新的 CSS3 的 :first-of-type： Demo

.content h3, .content div{
    display:none;
}
.content .classa:first-of-type{  
    display : block;
}

Answer 6

在这里查看 https://jsfiddle.net/32vw04jg/1/

<div class="content">
  <div>
    <h3>abc</h3>
    <div class="classa">some content</div>
  </div>
  <div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
  </div>
  <div>
    <h3>header3</h3>
    <div class="classa">another content</div>
  </div>
</div>


.content > div:not(:first-child) {
display: none;
}

Answer 7

.content > *{ display: none;}
.content > *:first-child{ display: block !important; }

Answer 8

如果我能正确理解这个问题，这里的目标是隐藏每个 child（h3 和 div.classa），除了第一个 h3 和div.classa旁边。

实现它的最简单方法是 :first-of-type 和 ~（一般兄弟）选择器的组合。

div.classa:first-of-type ~ * { display:none; }

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

使用 pure css 隐藏元素的第一个子元素以外的所有内容

Hide all except first child of an element using pure css

html

css

css-selectors