Question

我会隐藏＆＃34;列表中的第一项＆＃34;。示例：我有100个项目，但我只会显示第一个25个项目。我怎么能用CSS做这个？隐藏所有26 +

项目看起来像这样

<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>

Answer 1

下面的代码将隐藏第25个列表项之后的所有列表项。

<强> CSS ：

a:nth-of-type(1n+26)
{
  display:none;
}

演示：https://jsfiddle.net/ck0tks6x/

Answer 2

将列表放在列表项中对于可访问性和样式的简易性也是一个好主意。

＆＃13;

.mylist li {
     display:none;
    }

    .mylist li:nth-child(1),
    .mylist li:nth-child(2),
    .mylist li:nth-child(3),
    /* through to */
    .mylist li:nth-child(25)
    {
     display:list-item;
    }

＆＃13;

<ul class="mylist">
    <li><a href="" class="onegame">...</a></li>
    <li><a href="" class="onegame">...</a></li>
    <li><a href="" class="onegame">...</a></li>
    </ul>

＆＃13;

Answer 3

您可以使用nth-child(n+x)执行此操作，例如：

＆＃13;

a:nth-child(n+3) {
  font-weight: bold;
}

＆＃13;

<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>
<a href="" class="onegame">...</a>

＆＃13;

使用css隐藏列表中的最后一项

3 个答案: