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

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-typeandnth-of-type 选择器的用途。

例如：

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

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

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

Answer 2

你有几个不同的选择：

1. 使用:first-of-type伪类选择类型的第一个元素：

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

2. 或者使用:nth-of-type(n)伪类并指定第一个元素的索引：

   .ctr-1 > h3:nth-of-type(0) {
     display: none; 
   }
   

3. 如果类型无关紧要，并且您总是想选择第一个孩子，请使用:first-child伪类：

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

您可以使用：

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