结构性伪选择器

最新推荐文章于 2024-03-16 22:29:42 发布

s_meng_

最新推荐文章于 2024-03-16 22:29:42 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/s_meng_/article/details/115559944

版权

前端专栏收录该内容

39 篇文章 3 订阅

订阅专栏

结构性伪类选择器

在这里插入图片描述
主要介绍:nth-child(n)和:nth-of-type(n)
选择ul标签下的第一个元素:first-child

<style>
/* 选择ul中的第一个li */
ul li:first-child {
            background-color: pink;
        }
</style>
<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>
    </ul>
</body>

在这里插入图片描述
选择ul下的最后一个元素:last-child

<style>
/* 选择ul中的最后一个li */
ul li:last-child {
            background-color: pink;
        }
</style>
<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>
    </ul>
</body>

在这里插入图片描述
选择ul下的第n个元素:nth-child(n) n可以是数字，可以是关键字，可以是公式
n是数字，可以访问标签下的第n个元素

<style>
/* 选择ul中的第4个li */
ul li:nth-child(4) {
            background-color: skyblue;
        }
</style>
<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>
    </ul>
</body>

在这里插入图片描述
n是关键字:nth-child(even/odd)
使用关键字实现跨行变色效果

<style>
        /* n是关键字,可以实现换行变色
        /* 实现所有偶数行变为粉色 even */
        ul li:nth-child(even) {
            background-color: pink;
        }
        /* 实现所有奇数行变为蓝色 odd */
        ul li:nth-child(odd) {
            background-color: skyblue;
        }
    </style>
    <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>
    </ul>
</body>

在这里插入图片描述
n是公式

<style>
        /* nth-child(n),n是公式,括号内只能是n,不能是别的字母
        n从0开始自增,值为0是跳过,自增到最大值后,后面的元素也自动跳过 */
        /* 选择ol下的所有元素 */
        ol li:nth-child(n) {
            background-color: springgreen;
            margin-top: 5px;
        }
    </style>
    <body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>

在这里插入图片描述

`:nth-child(n) 和`:nth-of-type(n)`的区别`

:nth-child(n)会把选择器下的所有元素先排序，找到第n个元素，再去和选择器是否匹配，若匹配则选中，若不匹配，则跳过。
:nth-of-type(n)会先找到对应选择器的元素，再对对应的元素进行排序，选中调用。

s_meng_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
结构性伪选择器

结构性伪类选择器主要介绍:nth-child(n)和:nth-of-type(n)选择ul标签下的第一个元素:first-child<style>/* 选择ul中的第一个li */ul li:first-child { background-color: pink; }</style><body> <ul> <li>我是第1个孩子</li> &lt
复制链接

扫一扫