如何仅隐藏类型的第一个元素？

Question

我有以下标记：

<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>个标签，我只想隐藏第一个标签。怎么样？

Answer 1

这是first-of-type和nth-of-type选择器的用途。

例如：

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

这会隐藏h3的第一个.ctr-1后代，无论其在父元素中的位置如何。

当然，在您的具体示例中，h3确实也是>的直接（:first-child）和第一个（.ctr-1）后代。但如果这是巧合，你可能无法依赖它。在这种情况下，nth-of-type是可行的方法。

Answer 2

从技术上讲，它们都是first-child。

在您的示例中，您可以执行以下操作：

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

Answer 3

像这样：

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

jsFiddle here

Answer 4

你错了，ctr不存在，你需要告诉>选择页面选择器中的第一个元素级别试试这个：

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

Answer 5

您可以使用：

.ctr-1 > h3 { display: none; }