用于隐藏嵌套元素的CSS选择器

Question

我需要在容器列表中隐藏除第一个h3之外的所有内容。它们只包含类。

<div class="preview">
    --content
</div>
<div class="preview evaluation">
    <h3>Heading</h3>  <!-- should stay -->
</div>
<div class="preview evaluation">
    <h3>Heading</h3>   <!-- should hide -->
</div>
<div class="preview evaluation">
    <h3>Heading</h3>    <!-- should hide -->
</div>

我只需要用css做这个。

Answer 1

根据编辑过的问题更新了答案......

如果您只想隐藏<h3>元素，那么：

.evaluation>h3 { display: none; }
.evaluation:nth-of-type(2)>h3 { display: block; }

如果要隐藏包含<div>元素的<h3>元素，请：

.evaluation { display: none; }
.evaluation:nth-of-type(2) { display: block; }

您也可以这样做......

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

或...

.evaluation:not(:nth-of-type(2)) { display: none; }

Answer 2

如果它总是在你的例子中有结构：

.evaluation + .evaluation h3 {display:none}