ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-05-02 18:41:39  阅读:285  来源: 互联网

标签:CSS3 伪类 color Title nth 选中 child peter 选择器


 

 

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>

 

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>

 

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>

选中第二个标签

 

 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>

 

 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>

 

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>

 

隔几换色,隔行换色

隔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>

 

 

标签:CSS3,伪类,color,Title,nth,选中,child,peter,选择器
来源: https://www.cnblogs.com/mingerlcm/p/10801198.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有