前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

 

first-child 选中第一个标签 应用CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* 选中第一个标签 */
        .box ul li:first-child{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

last-child 选中最后一个标签 应用CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* 选中最后一个标签 */
        .box ul li:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

nth-child() 选中当前指定的标签,数值从1开始
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* 选中当前指定的标签,数值从1开始 */
        .box ul li:nth-child(2){
            color: red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

选中第二个标签

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

 nth-child(n)
n表示选中所有 从0开始的 0的时候表示没有选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* n表示选中所有 从0开始的 0的时候表示没有选中 */
        .box ul li:nth-child(n){
            color: red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

 nth-child(2n) 偶数 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* 偶数 */
        .box ul li:nth-child(2n){
            color: red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>

            <li class="item4">
                4
                <a href="#">mike</a>
            </li>

            <li class="item5">
                5
                <a href="#">tom</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

nth-child(2n-1) 奇数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* 奇数 */
        .box ul li:nth-child(2n-1){
            color: red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>

            <li class="item4">
                4
                <a href="#">mike</a>
            </li>

            <li class="item5">
                5
                <a href="#">tom</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

隔几换色,隔行换色

隔3换色,就是4n+1,隔4换色,就是5n+1。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        /* 奇数 */
        .box ul li:nth-child(4n+1){
            color: red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">jack</a>
            </li>
            <li class="item2">
                2
                <a href="#">ben</a>
            </li>
            <li class="item3">
                3
                <a href="#">peter</a>
            </li>

            <li class="item4">
                4
                <a href="#">mike</a>
            </li>

            <li class="item5">
                5
                <a href="#">tom</a>
            </li>

            <li class="item6">
                6
                <a href="#">ken</a>
            </li>

            <li class="item7">
                7
                <a href="#">mary</a>
            </li>

            <li class="item8">
                8
                <a href="#">tony</a>
            </li>

            <li class="item9">
                9
                <a href="#">Howard</a>
            </li>
        </ul>
    </div>
</body>
</html>

前端 CSS的选择器 伪类选择器 CSS3 nth-child()

 

 


上一篇:c求Smith数


下一篇:【Spring全家桶系列超全整理之SpringBoot框架】9 SpringBoot整合elasticsearch检索功能