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

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

你有几种不同的选择：

1. 使用:first-of-type伪类选择类型的第一个元素： ..ctr 1>h3:第一类型{ display: of；}

1. 或者使用:nth-of-type(n)伪类并指定第一个元素的索引： ..ctr 1>h3:nth-of type(0){ display: none；}

1. 如果类型无关紧要，并且您总是希望选择第一个子类，则使用:first-child伪类： ..ctr 1>h3:第一个孩子{ display: h3；}

Answer 2

这就是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实际上也是.ctr-1的直接(>)和第一个(:first-child)后代。但如果这是一个巧合，你可能无法依赖它。在这种情况下，nth-of-type是最好的选择。

Answer 3

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

在您的示例中，您可以：

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