第N个孩子，但链接到第一个孩子

Question

我编写了第n个子css行来隐藏li元素内部的第2、第3和第4个span标记。当我运行它时，它对所有三个无序列表都执行此操作，我只希望它对第一个列表执行此操作。如何修复代码，使其仅在第一个无序列表的li元素中隐藏第二个、第三个和第四个span标记？

li.sample span:nth-child(n+2) {
display: none !important:
}

<ul>
<li class="sample">
<span class="1">test</span>
<span class="2">test</span>
<span class="3">test</span>
<span class="4">test</span>
</li>
</ul>
<ul>
<li class="sample">
<span class="1">test</span>
<span class="2">test</span>
<span class="3">test</span>
<span class="4">test</span>
</li>
</ul>
<ul>
<li class="sample">
<span class="1">test</span>
<span class="2">test</span>
<span class="3">test</span>
<span class="4">test</span>
</li>
</ul>

Answer 1

最简单的解决方案是在第一个"样品"；div，例如"；先取样"；并通过它进行选择。如果需要保持标记的原样，可以通过ul:first-of-type li.sample span:nth-child(n+2)选择第一个示例。

Answer 2

可能有几个选项，尽管在我看来，如果总是有4个元素，最简单的方法是使用~选择器。这实际上适用于以下所有元素，即使您有4个以上的元素。下面是一个代码示例，我在其中注释了display: none定义，这样您就可以看到元素是如何受到影响的。

ul.sampleul:first-of-type>li.sample span:first-child~span {
color: red;
/* display: none; */
}

<ul class="sampleul">
<li class="sample">
<span>test</span>
<span>test</span>
<span>test</span>
<span>test</span>
</li>
</ul>
<ul class="sampleul">
<li class="sample">
<span>test</span>
<span>test</span>
<span>test</span>
<span>test</span>
</li>
</ul>
<ul class="sampleul">
<li class="sample">
<span>test</span>
<span>test</span>
<span>test</span>
<span>test</span>
</li>
</ul>

此外，不能仅将类名与数字一起使用。