css中的序号选择器

最新推荐文章于 2023-03-12 06:00:00 发布

名叫Java

最新推荐文章于 2023-03-12 06:00:00 发布

阅读量861

点赞数

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

本文链接：https://blog.csdn.net/T_reak/article/details/121050678

版权

1、:first-child：表示选择第一个子元素，如 .box1 p:first-child 表示选择box盒子中的第一个p

2、：nth-child():表示选择任意序号的子元素，如 .box2 p:nth-child(3)表示选择box2盒子中的第三个p。另外nth-child还可以写成an+b的形式，如 .box2 p:nth-child(3n+2)表示从第二个p开始，每三个p选择一个 ps：2n+1等价于odd及奇数，2n等价于even及偶数

3、:nth-of-type：表示选择同种标签指定序号的子元素，

如 .box3 p:nth-of-type(3)表示box中p类型的第三个p

4、:nth-last-child()：表示倒数选择

5、:nth-last-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>Document</title>
    <style>
        .box1 p:first-child{
            color: blue;
        }

最低0.47元/天解锁文章

名叫Java

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中的序号选择器

1、:first-child：表示选择第一个子元素，如 .box1 p:first-child 表示选择box盒子中的第一个p2、：nth-child():表示选择任意序号的子元素，如 .box2 p:nth-child(3)表示选择box2盒子中的第三个p。另外nth-child还可以写成an+b的形式，如 .box2 p:nth-child(3n+2)表示从第二个p开始，每三个p选择一个 ps：2n+1等价于odd及奇数，2n等价于even及偶数3、:nth-of-type：表示选择同种标...
复制链接

扫一扫