CSS - 隐藏标签第n + 2的div

我有类似如下结构：CSS - 隐藏标签第n + 2的div

<div class="group"> 
    <div class="row1"> 
    <label>Label 1A</label> 
    <input .../> 
    <label>Label 1B</label> 
    <input .../> 
    </div> 
    <div class="row2"> 
    <label>Label 2A</label> 
    <input .../> 
    <label>Label 2B</label> 
    <input .../> 
    </div> 
    <div class="row3"> 
    <label>Label 3A</label> 
    <input .../> 
    <label>Label 3B</label> 
    <input .../> 
    </div> 
    ... 
</div>

，但我想显示的标签仅在第一行。该结构是自动生成的，无法更改。我尝试使用第n个孩子选择

.group:nth-child(n+2) div>label

，但不起作用。实际上，甚至.group：nth-child（n + 2）也无法选择n + 2个div。我在做什么错？

编辑：请注意我不知道生成页面之前单行（row1，row2等）的类。

来源

2016-06-09 algiogia

您是否尝试过隐藏所有的标签然后设置第一个显示？ – Separatrix

你需要'.group'的'nnth-child（n + 2）'*，所以它应该是'.group：n-child（n + 2）label'（不是'：'之前的空格）或'.group div：nth-child（n + 2）label'。或者，另一个替代方法是首先隐藏所有内容，然后将'.group div：first-child label'设置为可见。 – Harry

感谢您的出色答案。我会选择塞巴斯蒂安，因为他是第一个发布。 – algiogia

.group:nth-child(n+2) div > label有一个错误。删除div因为nth-child选择div！如果您需要在左侧的空间，您可以使用visibility:hidden;与display:none;

您可以采用如下方案来隐藏label而不是删除空间：

.group div:nth-child(n+2) label { 
 
    visibility:hidden; 
 
}

<div class="group"> 
 
    <div class="row1"> 
 
    <label>Label 1A</label> 
 
    <input .../> 
 
    <label>Label 1B</label> 
 
    <input .../> 
 
    </div> 
 
    <div class="row2"> 
 
    <label>Label 2A</label> 
 
    <input .../> 
 
    <label>Label 2B</label> 
 
    <input .../> 
 
    </div> 
 
    <div class="row3"> 
 
    <label>Label 3A</label> 
 
    <input .../> 
 
    <label>Label 3B</label> 
 
    <input .../> 
 
    </div> 
 
</div>

来源

2016-06-09 14:41:40

添加这个，隐藏你的标签.row2和.row3。我已经添加了两种方法，即从特定的div手动选择标签，或者按照您询问的n + 2手动选择标签。

.row2 > label{ 
opacity:0; 
} 
.row3 > label{ 
opacity:0; 
}

（或）

div:nth-child(n+2) label{ 
opacity:0; 
}

来源

2016-06-09 14:43:00 frnt

我有无限数量的行。解决方案的第一部分意味着我必须提前知道这些ID并将它们全部添加到CSS中。 – algiogia

这就是为什么我补充说，如果你正在计划手动然后上面暗示，但是当你在动态工作，那时你可以隐藏标签的不透明度。 – frnt

我喜欢的：没有选择器这种东西，特别是如果你不知道你有多少行被处理（你已经提到它们是生成的）

第n个子选择器也可以工作。我提供了几个如何做到这一点的例子。

http://codepen.io/anon/pen/mEVOPL?editors=1100

这是你最初询问的选择，虽然：

.example2 .group div:nth-child(n+2) label{ 
    visibility:hidden; 
}

（编辑出的不透明度：0;能见度：隐藏;）

来源

2016-06-09 14:59:07 MassDebates

很棒的回答。我应该清楚地知道，在代码生成之前，我不知道row1，rows2 ......所以我不能使用** not（.row1）** – algiogia

好吧，“n型”或者“ 'nth-child'选择器的例子可以正常工作，然后:)另外，一定要看看这个链接。有助于简化选择器范围https://css-tricks.com/examples/nth-child-tester/。此外，您始终可以使用：首先与包含这些标签和输入的行div结合使用 – MassDebates

这是一个非常棒的链接！谢谢！ – algiogia

CSS - 隐藏标签第n + 2的div

回答

相关问题