时间戳

首页 > 解决方案 > css 动态 nth-child 选择器

html - css 动态 nth-child 选择器

问题描述

我有这个元素

<div>
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</li>
<li>
item 4
</li>
</div>

我总是想展示前两个，因此我这样做了

li {
  &:nth-child(1),
  &:nth-child(2) {
    display: none;
  }
}

但是如果项目列表添加了 1 个项目，可见项目将是 3，有什么办法可以始终显示 2？我想我需要修改我的CSS？

标签： htmlcss

解决方案

首先，li表示“列表项”，因此该元素仅在列表（ol或ul）中有效。因此，在我的示例中，我将 更改div为ul（无序列表）元素。

其次，你的代码似乎总是隐藏前两个元素，但你说你总是想显示前两个。为此，li默认情况下使用 隐藏所有元素display: none，并且只隐藏display: block前两个：

li {
  display: none;
}

li:nth-child(1), li:nth-child(2) {
  display: block;
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

推荐阅读