css选择器nth-child

其余的就不说了,说说两个我目前才了解的两个选择方式。

nth-child(-n+3) : 选择列表前三个项目。

nth-child(n+5) : 选择列表第五个(包括第五个)之后的所有项目。

示例

<ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
    <li>list6</li>
    <li>list7</li>
    <li>list8</li>
    <li>list9</li>
    <li>list10</li>
</ul>
li {
    list-style-type: none;
}
li:nth-child(-n+3) {
    background-color: green;
    color: #fff;
}
li:nth-child(n+5) {
    background-color: red;
}

最终效果如下图:

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注