如何只隐藏类型的第一个元素？ [英] How do I hide only the first element of a type?

问题描述

我有以下标记：

<div class="ctr-1">
    <h3>Title</h3>
    <div class="ctr-2">
        <h3>Title</h3>
    </div>
</div>

和以下CSS

.ctr-1 h3:first-child{ display:none; }

< h3> 隐藏，我只想第一个隐藏。

Both <h3> tags are hidden, I only want the first one hidden. How?

推荐答案

这是 first-of-type 和 nth-of-type 选择符。

This is what the first-of-type and nth-of-type selectors are for.

例如：

.ctr-1 h3:first-of-type { display:none; }
/* - Or - */
.ctr-1 h3:nth-of-type(0) { display:none; }

这将隐藏第一个 h3

授予，在您的具体示例中， h3 确实也是立即（> ）和第一个（：first-child ） .ctr-1 的后代。但如果这是巧合，你可能不能依靠它。在这种情况下， nth-of-type 是要走的路。

Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.

编辑

如@crush的评论中所述，这些CSS3选择器适用于IE9及更高版本。请参阅：我可以使用CSS3选择器吗？

As noted in the comment by @crush, these are CSS3 selectors that are applicable to IE9 and above. Reference here: Can I use CSS3 selectors?

这篇关于如何只隐藏类型的第一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！