html--结构伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        child 孩子  向下寻找时,没有找到指定元素,则不会在寻找
        type  类型  向下寻找时,没有找到指定元素,继续往下寻找,直到找到
        从(1)开始搜索
        nth-child(值)   nth-of-type(值) 寻找指定值  n=所有  偶数2,4,6…… 基数:1,3,5……如下,可运行
        first-of-type  寻找第一个元素   last-of-type 寻找最后一个元素  only-of-type  寻找唯一元素
         
        <style>
/*          li:nth-child(2n+1){
                background-color: #FF0000;
            }
            li:nth-of-type(2n){
                background-color: blue;
            } */
/*          li:nth-of-type(2){
                background-color: aqua;
            }
            li:nth-child(5){
                background-color: chocolate;
            } */
            li:first-of-type{
                background-color: #FF0000;
            }
            li:last-child{
                background-color: #FF0000;
            }
            p:only-of-type{
                color: blue;
            }
/*          div:only-of-type{
                background-color: #FF0000;
            } */
        </style>
    </head>
    <body>
        <ul>
            <div>aaa</div>
            <li></li>
            <li></li>
            <div>aaa</div>
            <li></li>
            <li></li>
            <li></li>
            <p>111</p>
        </ul>
<!--         <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
    </body>
</html>

  

posted on   爱前端的小魏  阅读(79)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示