nth类选择器学习笔记

最新推荐文章于 2024-06-18 09:03:18 发布

陌上尘123

最新推荐文章于 2024-06-18 09:03:18 发布

阅读量528

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lxworld123/article/details/80748372

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

先看看类似的first-child伪类选择器；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*同层的比较寻找的是第一个该层子元素（其他元素会干扰他）*/
            .box p:first-child {
                color: red;
            }
            .box p:last-child{
                color: green;
            }
        </style>

    </head>
    <body>
        <div class="box">
            <a href="###">链接</a>
            <p>p1</p>
            <p>p2</p>
            <div>
                <p>p3</p>
                <p>p3-1</p>
                <div>
                    <p>p3-1-1</p>
                </div>
            </div>
            <p>p4</p>
        </div>
    </body>
</html>

效果：
这里写图片描述
同层的比较寻找的是第一个该层子元素（其他元素会干扰他）如p1。

第二种：first-of-type类

            .box2 p:first-of-type{
                color: red;
            }
                    <div class="box2">
            <a href="###">链接</a>
            <p>p1</p>
            <p>p2</p>
            <div>
                <p>p3</p>
                <p>p3-1</p>
                <div>
                    <p>p3-1-1</p>
                </div>
            </div>
            <p>p4</p>
        </div>

效果：
这里写图片描述
现在p1也可以被找到了，同类型比较，其他元素不会干扰。

3：only类

            .box3 p:only-of-type{
                color: blue;
            }
            .box3 p:only-child{
                color: red;
            }

        <div class="box3">
            <p>p1</p>
            <div>
                <p>p2</p>
            </div>
            <div>
                <p>p3</p>
                <p>p4</p>
            </div>
        </div>

效果：
这里写图片描述

only-of-type用于找到只有一个p标签的，only-child用于找到只有一个孩子而且是p的

4.nth类选择器

            .box4 p:nth-child(4){
                color: red;;
            }

            .box4 p:nth-of-type(1){
                color: blue;
            }
        <div class="box4">
            <a href="">链接</a>
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
            <p>p4</p>
            <p>p5</p>
            <p>p6</p>
        </div>

效果：
这里写图片描述
nth-child就是找标签下第n个标签，nth-of-type是找同类中的底n个。括号的参数还有其他写法。

            .box5 ul li:nth-child(even){
                color: red;
            }

            .box5 ul li:nth-child(odd){
                color: blue;
            }
                    <div class="box5">
            <ul>
                <li>li1</li>
                <li>li2</li>
                <li>li3</li>
                <li>li4</li>
                <li>li5</li>
                <li>li6</li>
                <li>li7</li>
                <li>li8</li>
                <li>li9</li>
                <li>li10</li>
            </ul>
        </div>

效果：
这里写图片描述
序列是从1开始的odd是奇数even是偶数。

            .box6 li:nth-child(3n-1){
                color: pink;
            }
                    <div class="box6">
            <ul>
                <li>li1</li>
                <li>li2</li>
                <li>li3</li>
                <li>li4</li>
                <li>li5</li>
                <li>li6</li>
                <li>li7</li>
                <li>li8</li>
                <li>li9</li>
                <li>li10</li>
            </ul>
        </div>

效果：
这里写图片描述
这里可以选择出符合an+b数值的序列，注意n是从零开始的。通过这种写法可以实现对浮动后以类似表格的方法显示的某一列。
例如：

            .box6 ul{
                max-width: 600px;
                margin: 0;
                padding: 1%;
                overflow: hidden;
                border: 1px solid red;
            }

            .box6 li{
                display: block;
                width: 30%;
                float: left;
                border: 1px solid green;
                list-style-type: none;
                box-sizing: border-box;
            }
            @media only screen and (min-width: 500px) {
                .box6 li:nth-child(3n-1){
                    color: pink;
                    margin: 0 5%;
                }
            }
            @media only screen and (max-width: 500px) {
                .box6 li:nth-child(2n){
                    width: 40%;
                    margin-left: 5%;
                }
                .box6 li:nth-child(2n+1){
                    width: 40%;
                    margin-right: 5%;
                }
            }

效果：
这里写图片描述

陌上尘123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
nth类选择器学习笔记

先看看类似的first-child伪类选择器；&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css&quot
复制链接

扫一扫