css3-结构伪类选择器

最新推荐文章于 2022-04-10 22:44:43 发布

零OO

最新推荐文章于 2022-04-10 22:44:43 发布

阅读量639

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/119889305

版权

前端专栏收录该内容

221 篇文章 8 订阅

订阅专栏

结构伪类选择器简介

结构伪类选择器- - -根据文档结构，使用伪类选择器选择元素。常用于根据父元素，使用伪类选择器选择子元素。

结构伪类选择器的使用方法

方法一：父元素名子元素名:first-child/last-child/nth-child()

first-child:第一个孩子
last-child:最后一个孩子
nth-child():括号里面可以写- - - 数字、关键字、公式

数字—直接指定第几个
关键字—even：偶数 odd：奇数
公式—n:代表选择所有子元素，n会从0开始，每次增加1，直到选择到最后一个；
3n:选择第3、6、9…个子元素。原理：n从0开始，30=0,31=3,3*2=6、、、其他倍数n依次类推；
n+5:从第5个开始。原理：n从0开始，0+5=5,1+5+6，、、、；
-n+5:选择前5个。原理：n从0开始，-0+5=5，-1+5=4，、、、；
注意：n+5、-n+5这里n放在前面才有效。换成5+n、5-n后不生效

方法二：父元素名子元素名:first-of-type/last-of-type/nth-of-type()

此方式用法和上面使用方法一样

-child和-of-type区别

-child会给父元素下的所有子元素排序，先找在父元素下的第几个子元素，然后看前面写的元素名称，找到的子元素和写的元素名一致，才生效

-of-type会现在找要选择的元素名称，然后找该元素中的第几个

无序/有序列表，子元素只有li，两个效果一样，一般用-child
当父元素中有不同种类的子元素时，-child就可能选择不到，需要使用-of-type进行选择

示例

代码示例：

<!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.0">
    <title>结构伪类选择器</title>
    <style>
        /* 第一个子元素 */
        
        ul li:first-child {
            background-color: pink;
        }
        /* 最后一个子元素 */
        
        ul li:last-child {
            background-color: pink;
        }
        /* 第2个子元素 */
        
        ul li:nth-child(2) {
            background-color: rgb(223, 115, 65);
        }
        /* 选择第3、6、9...子元素 */
        
        ul li:nth-child(3n) {
            background-color: green;
        }
        /* n代表选择所有，n会从0依次开始增加1，直到最后一个子元素 */
        
        .fruit li:nth-child(n) {
            background-color: pink;
        }
        /* even代表偶数 */
        
        .fruit li:nth-child(even) {
            color: rgb(236, 118, 20);
        }
        /* odd代表偶数 */
        
        .fruit li:nth-child(odd) {
            color: cornflowerblue;
        }
        /* 从第5个开始 */
        
        .sport li:nth-child(n+5) {
            background-color: pink;
        }
        /* 此写法不生效，会先找div下的第一个孩子是span，然后和p对比，发现不一致，不生效*/
        
        div p:first-child {
            background-color: pink;
        }
        /* 此写法生效，会先找到div下的p,然后找第一个p */
        
        div p:first-of-type {
            background-color: green;
        }
        /* 从第2个开始 */
        
        div p:nth-of-type(n+2) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <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>
    </ul>

    <ol class="fruit">
        <li>苹果</li>
        <li>梨</li>
        <li>香蕉</li>
        <li>橙子</li>
        <li>草莓</li>
        <li>榴莲</li>
    </ol>

    <ol class="sport">
        <li>跑步</li>
        <li>游泳</li>
        <li>跳绳</li>
        <li>骑行</li>
        <li>登山</li>
        <li>篮球</li>
    </ol>

    <div>
        <span>wawawa</span>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
    </div>
</body>

</html>

页面效果：

零OO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-结构伪类选择器

结构伪类选择器简介结构伪类选择器- - -根据文档结构，使用伪类选择器选择元素。常用于根据父元素，使用伪类选择器选择子元素。结构伪类选择器的使用方法方法一：父元素名子元素名:first-child/last-child/nth-child()first-child:第一个孩子last-child:最后一个孩子nth-child():括号里面可以写- - - 数字、关键字、公式数字—直接指定第几个关键字—even：偶数 odd：奇数公式—n:代表选择所有子元素，n会从0开始，每次增加1，
复制链接

扫一扫