css选择器nth-child

该文章由 leevare 发布于 ,归类于 HTML/CSS

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

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;
}

最终效果如下图:

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒