nth-child 的一些小尝试

最新推荐文章于 2021-10-20 11:05:35 发布

FungLeo

最新推荐文章于 2021-10-20 11:05:35 发布

阅读量1.2k

点赞数 1

分类专栏： HTML\CSS 文章标签： css3 nth-child

本文链接：https://blog.csdn.net/FungLeo/article/details/50498431

版权

HTML\CSS 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

nth-child 的一些小尝试

前言

对于 first-child 或者 last-child 等,还算比较常用.但是 nth-child 一般也就用隔行变色.一直不认为其有多强大的功能,甚至认为其比较鸡肋.

但是今天深入研究了一下,发现这货不是一点半星的强大啊!!!!不废话,直接上代码

code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nth-child test</title>
</head>
<body>
    <ul>
        <li>this is title 1</li>
        <li>this is title 2</li>
        <li>this is title 3</li>
        <li>this is title 4</li>
        <li>this is title 5</li>
        <li>this is title 6</li>
        <li>this is title 7</li>
        <li>this is title 8</li>
        <li>this is title 9</li>
        <li>this is title 10</li>
        <li>this is title 11</li>
        <li>this is title 12</li>
        <li>this is title 13</li>
        <li>this is title 14</li>
        <li>this is title 15</li>
        <li>this is title 16</li>
        <li>this is title 17</li>
        <li>this is title 18</li>
        <li>this is title 19</li>
        <li>this is title 20</li>
    </ul>
</body>
</html>
<style>
    li:nth-child(1){background: #fda;}
    li:nth-child(3n){background: #daf;}
    li:nth-child(-n+4) {font-weight: bold;}
    li:nth-child(5n){border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 20px;}
    li:nth-child(n+5) {text-indent: 10px;}
    li:nth-child(3n+1) {color: #f00;}
    li:nth-child(3n-1) {color: #00f;}
</style>

太TM灵活了,以后这种地方,根本就不需要加上 class啦!!!!

更多内容阅读

精通:nth-child
关于nth-child的疑惑
 w3school:CSS3 :nth-child() 选择器我就是看了这个才认为这玩意儿鸡肋的,W3S害死人啊!!!

FungLeo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nth-child 的一些小尝试

nth-child 的一些小尝试前言对于 first-child 或者 last-child 等,还算比较常用.但是 nth-child 一般也就用隔行变色.一直不认为其有多强大的功能,甚至认为其比较鸡肋.但是今天深入研究了一下,发现这货不是一点半星的强大啊!!!!不废话,直接上代码code<!DOCTYPE html><html><head> <meta charset="UTF-8
复制链接

扫一扫