css3第四篇，选择器三(伪类选择器一）

最新推荐文章于 2023-06-22 21:35:09 发布

yyyyfan

最新推荐文章于 2023-06-22 21:35:09 发布

阅读量1.4k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/sinat_25786399/article/details/82827930

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

伪类选择器一

语法：。指定选择器特殊情况下的属性以及属性值

结构伪类选择器

1.:nth-child:根据定义的标签顺序,来给指定的标签添加样式。先找到符合顺序的标签，再匹配标签是否符合设定的类型。

选择器	作用
:first-child	所有标签中的第一个,并且要符合设定的标签类型
:last-child	所有标签中的最后一个,并且要符合设定的标签类型
:nth-child()	符合指定顺序的标签.()当中可写内容:一个数值,表示指定的顺序;英文单词odd奇数标签even偶数标签.公式:a*n +/- b,公式没有固定的写法,完全根据需求而定,a,b是根据需求自行设定的数字,n是css3系统规定的,从0开始的整数,将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果
nth-last-child()	与nth-child()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-child(3)

举例1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .ul1>li:first-child {
        color: blue;
    }

    .ul1>li:last-child {
        color: green;
    }

    .ul1>li:nth-child(4) {
        color: red;
    }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>北京1</li>
        <li>北京2</li>
        <li>北京3</li>
        <li>北京4</li>
        <li>北京5</li>
        <li>北京6</li>
        <li>北京7</li>
        <li>北京8</li>
    </ul>
</body>

</html>

举例2：请看注释。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 一个标签是a标签,与设定的类型符合,无法加载样式效果 */

    .div1>span:first-child {
        color: red;
    }
    /* 第一个标签是a标签,与设定类型一致,可以加载样式效果 */

    .div1>a:first-child {
        color: green;
    }
    /* 同理,最后一个标签是p标签,与设定类型不一致,没法加载样式效果 */

    .div1>h6:last-child {
        color: blue;
    }
    /* 最后一个标签是p标签,与设定类型一致,可以加载样式效果 */

    .div1>p:last-child {
        color: blue;
    }
    /* 第五个标签,是h1标签,与设定类型一直,可以加载样式效果 */

    .div1>h1:nth-child(5) {
        color: yellow;
    }
    </style>
</head>

<body>
    <div class="div1">
        <a href="#">百度1</a>
        <a href="#">百度2</a>
        <span>广州1</span>
        <span>广州2</span>
        <h1>重庆1</h1>
        <h2>重庆2</h2>
        <h3>重庆3</h3>
        <h4>重庆4</h4>
        <h5>重庆5</h5>
        <h6>重庆6</h6>
        <p>武汉</p>
    </div>
</body>

</html>

举例3：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 按照设定的数字作为顺序,查找位置,再看该位置上的标签,是否符合类型设定 */
    /*  .ul1>li:nth-child(2) { color: red; } */
    /* 所有奇数标签,并且要符合类型设定,加载css样式 */
    /*  .ul1>li:nth-child(odd) { color: blue; } */
    /* 所有的偶数标签,并且要符合类型设定,可以加载css样式效果 */
    /*     .ul1>li:nth-child(even) {
        color: green;
    } */
    /* n是从0开始的数值,按照公式计算出相应的结果,结果就是写入的数值,就是标签的顺序,再看该顺序上的标签是否符合设定类型 */
    /* 需求:3,6,9,12...标签改变颜色 */
    /*  .ul1>li:nth-child(3n) { color: pink; } */
    /*     n是从0开始的数值,2n+1,的计算结果 1,3,5,7,9.... 最终效果为奇数标签添加效果 */
    /*  .ul1>li:nth-child(2n+1) { color: orange; } */
    /*     n是从0开始的数值,2n-1,的计算结果 -1,1,3,5,7,9.... 没有没有-1的标签顺序,没有标签会添加-1的样式效果,最终效果为奇数标签添加效果 */
    /*  .ul1>li:nth-child(2n-1) { color: orange; } */
    /* 设定奇数标签,并且是span的标签添加样式效果,第三个标签是a标签,符合类型设定,不会添加样式效果 */

    .div2>span:nth-child(odd) {
        color: yellow;
    }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>北京1</li>
        <li>北京2</li>
        <li>北京3</li>
        <li>北京4</li>
        <li>北京5</li>
        <li>北京6</li>
        <li>北京7</li>
        <li>北京8</li>
        <li>北京9</li>
        <li>北京10</li>
        <li>北京11</li>
        <li>北京12</li>
        <li>北京13</li>
        <li>北京14</li>
        <li>北京15</li>
        <li>北京16</li>
    </ul>
    <div class="div2">
        <span>北京1</span>
        <span>北京2</span>
        <a href="#">上海</a>
        <span>北京3</span>
        <span>北京4</span>
        <span>北京5</span>
        <span>北京6</span>
        <span>北京7</span>
        <span>北京8</span>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>

</html>

举例4：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*     所有标签中正数第二个标签,并且要求标签类型为li标签 */

    .ul1>li:nth-child(2) {
        color: red;
    }
    /*     所有标签中倒数第二个标签,并且要求标签类型为li标签 */

    .ul1>li:nth-last-child(2) {
        color: blue;
    }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>北京1</li>
        <li>北京2</li>
        <li>北京3</li>
        <li>北京4</li>
        <li>北京5</li>
        <li>北京6</li>
        <li>北京7</li>
        <li>北京8</li>
        <li>北京9</li>
        <li>北京10</li>
        <li>北京11</li>
        <li>北京12</li>
        <li>北京13</li>
    </ul>
</body>

</html>

举例5：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*  .div1>div:nth-child(1)
    .div1选择器标签中,子级第一个标签,该标签还必须是div */
    /*  .div1>div:nth-child(1)>span:nth-child(1) .div1选择器标签中,子级第一个标签,该标签还必须是div,再找子级标签,找第一个标签,标签还必须是span */

    .div1>div:nth-child(1)>span:nth-child(1) {
        color: green;
        font-size: 20px;
    }

    .div1>div:nth-child(1)>span:nth-child(2) {
        color: red;
        font-size: 20px;
    }

    .div1>div:nth-child(1)>span:nth-child(3) {
        color: gray;
        font-size: 10px;
    }
    /* 	.div1>div:nth-child(2)
	.div1选择器标签中,子级第二个标签,该标签还必须是div  */
    /*  .div1>div:nth-child(2)>ul>li:nth-child(even) .div1选择器标签中,子级第二个标签,该标签还必须是div,子级的ul,ul中所有偶数标签,并且类型必须是li */

    .div1>div:nth-child(2)>ul>li:nth-child(even) {
        background: green;
    }
    </style>
</head>

<body>
    <div class="div1">
        <div>
            <span>你所在的地区</span>
            <span>*</span>
            <span>(必填,单选)</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <span>你的性别</span>
            <span>*</span>
            <span>(必填,单选)</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <span>你的年龄</span>
            <span>*</span>
            <span>(必填,单选)</span>
        </div>
        <div>
            <ul>
                <li>
                    <input type="radio" name="age">18岁以下
                </li>
                <li>
                    <input type="radio" name="age">18岁~25岁
                </li>
                <li>
                    <input type="radio" name="age">26岁~34岁
                </li>
                <li>
                    <input type="radio" name="age">35岁~44岁
                </li>
                <li>
                    <input type="radio" name="age">44岁以上
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

2:nth-of-type.先找到所有符合类型的标签,再按照顺序给指定位置的标签添加样式

选择器	说明
:first-of-type	所有符合设定类型的标签中的第一个
:last-of-type	所有符合设定类型的标签中的最后一个
:nth-of-type()	符合指定顺序的标签,()当中可写内容:一个数值表示指定的顺序,英文单词odd奇数标签、even偶数标签.公式a*n +/- b公式没有固定的写法,完全根据需求而定a,b是根据需求自行设定的数字n是css3系统规定的,从0开始的整数将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果
nth-last-of-type()	与nth-of-type()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-of-type(3),所有符合设定类型的标签中的倒数第三个标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* child 先找第一个标签,再要求符合设定类型 */

    .div1>strong:first-child {
        color: red;
    }
    /* 先找到所有符合类型的标签,再按照设定的顺序给标签添加样式 */


    /* first-of-type,所有的strong中的第一个strong标签 */
    /*  .div1>strong:first-of-type { color: yellow; } */

    /*  last-of-type,所有的strong中的最后一个strong标签 */
    /*  .div1>strong:last-of-type {
        color: blue;
    } */


    /* nth-of-type(3)找到所有标签中符合设定顺序的标签,添加样式 */
    /*  .div1>strong:nth-of-type(3) {
        color: pink;
    } */
    /*  .div1>strong:nth-of-type(even) { color: orange; } */

    /*nth-last-of-type 找到符合顺序的的标签,是从所有符合类型的标签中倒数 */
    /* .div1>strong:nth-last-of-type(2) { color: green; } */
    </style>
</head>

<body>
    <div class="div1">
        <a href="#">新浪</a>
        <a href="#">搜狐</a>
        <strong>北京</strong>
        <a href="#">搜狐</a>
        <strong>上海</strong>
        <a href="#">搜狐</a>
        <strong>重庆</strong>
        <a href="#">搜狐</a>
        <strong>天津</strong>
        <strong>广州</strong>
        <em>武汉</em>
        <em>长沙</em>
    </div>
</body>

</html>

总结:child先数数,先找顺序,再看当前位置标签是否符合设定标签类型;of-type先找到所有的符合类型的标签,不符合类型的标签不参与,再找顺序符合设定顺序的标签.

yyyyfan

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
css3第四篇，选择器三(伪类选择器一）

伪类选择器一语法：。指定选择器特殊情况下的属性以及属性值结构伪类选择器1.:nth-child:根据定义的标签顺序,来给指定的标签添加样式。先找到符合顺序的标签，再匹配标签是否符合设定的类型。选择器作用 :first-child 所有标签中的第一个,并且要符合设定的标签类型 :last-child 所有标签中的最后一个,并且要符合设定的标签类型 :...
复制链接

扫一扫