结构伪类选择器

黄昏终结者

已于 2022-08-25 21:21:39 修改

阅读量5.7k

点赞数 4

文章标签：前端 html css javascript 开发语言

于 2022-04-04 14:45:00 首次发布

本文链接：https://blog.csdn.net/m0_62181310/article/details/123939584

版权

一、选择器:

二、伪元素:

一、选择器:

:first-child	选择父元素里边的第1个子元素
:last-child	选择父元素里边的最后1个子元素
:nth-child(2)	选择父元素里边第n个子元素
:nth-last-child(3)	选择父元素里边倒数第n个子元素

主体内容:

<body>
    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
        <li>我是第6个li标签</li>
        <li>我是第7个li标签</li>
        <li>我是第8个li标签</li>
        <li>我是第9个li标签</li>
    </ul>
</body>

结构伪类选择器用法:

1.选择父元素里边的第1个子元素

ul li:first-child {
    font-size: 50px;
    color: aquamarine;
}

2.选择父元素里边的最后1个子元素

ul li:last-child {
    font-size: 40px;
    color: #ccc;
}

3.选择父元素里边第n个子元素

nth-child() 选择父元素里边的第n个子元素,将所有的子元素进行排序,不分种类
注:n是从0开始,0,1,2,3.......

ul li:nth-child(2) {
    font-size: 24px;
    color: red;
}

4.选择父元素里边倒数第n个子元素

nth-child() 选择父元素里边的第n个子元素,将所有的子元素进行排序,不分种类
注:n是从0开始,0,1,2,3.......

ul li:nth-last-child(3) {
    font-size: 40px;
    color: blueviolet;
}

5.选择父元素里边偶数项的子元素 :nth-child(2n) 2n或者even

ul li:nth-child(2n) {
    font-size: 30px;
    color: blueviolet;
}

6.选择父元素里边奇数项的子元素 :nth-child(2n+1) 2n+1或者2n-1或者odd

2*0-1 -1
2*1-1 1
2*2-1 3

ul li:nth-child(2n-1) {
    font-size: 50px;
    color: red;
}

7.:nth-child(-n+i) 选择父元素里前i项子元素

ul li:nth-child(-n+4) {
    font-size: 24px;
    color: cadetblue;
}

8.:nth-child(n+i) 从第i项开始到最后一项结束

ul li:nth-child(n+7) {
    font-size: 40px;
    color: yellow;
}

9.选择父元素里边4的倍数项的子元素

ul li:nth-child(4n) {
    font-size: 35px;
    color: darksalmon;
}

10.选择 ul里边的第一个li里边的a

    <style>
        ul li:first-child a {
            font-size: 30px;
            color: rgb(226, 147, 43);
        }
        ul li:nth-child(2) a {
            font-size: 50px;
            color: cadetblue;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="" herf="#">我是第1个a标签</a></li>
        <li><a href="" herf="#">我是第2个a标签</a></li>
        <li><a href="" herf="#">我是第3个a标签</a></li>
        <li><a href="" herf="#">我是第4个a标签</a></li>
        <li><a href="" herf="#">我是第5个a标签</a></li>
        <li><a href="" herf="#">我是第6个a标签</a></li>
        <li><a href="" herf="#">我是第7个a标签</a></li>
        <li><a href="" herf="#">我是第8个a标签</a></li>
        <li><a href="" herf="#">我是第9个a标签</a></li>
    </ul>

11.选择父元素里边按照不同类型的第n个子元素

<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>
        .box p:nth-of-type(1) {
            font-size: 30px;
            color: blueviolet;
        }
        .box span:nth-of-type(2) {
            font-size: 50px;
            color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>番茄</h3>
        <span>黄瓜</span>
        <p>水杯</p>        
        <span>水果</span>
        <p>西瓜</p>
    </div>
</body>

二、伪元素:

前伪元素:

在盒子的最前边生成伪元素,伪元素相当于行内元素,可以转成块元素
content:'' 为必写项

.box::before {
    content: '西红柿';
    width: 30px;
    height: 30px;
    background-color: red;
}

后伪元素:

在盒子的最后边生成伪元素,伪元素相当于行内元素
content:'' 为必写项

.box::after {
    content: '番茄';
    background-color: yellow;
}

黄昏终结者

关注

4
点赞
踩
25

收藏

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

6.选择父元素里边奇数项的子元素 :nth-child(2n+1) 2n+1或者2n-1或者odd。5.选择父元素里边偶数项的子元素 :nth-child(2n) 2n或者even。7.:nth-child(-n+i) 选择父元素里前i项子元素。11.选择父元素里边按照不同类型的第n个子元素。2.选择父元素里边的最后1个子元素。1.选择父元素里边的第1个子元素。选择父元素里边的最后1个子元素。3.选择父元素里边第n个子元素。选择父元素里边的第1个子元素。选择父元素里边第n个子元素。...
复制链接

扫一扫