5_结构伪类选择器

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*ul的第一个子元素*/
        ul li:first-child{
            background: blue;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
        /*选中p1:定位到父元素<body>，选择当前的第一个元素p1
        选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序*/
        p:nth-child(1){
            background: aqua;
        }
        /*选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: maroon;
        }
        a:hover{
            background: blue;
        }


    </style>
</head>
<body>
    <a href="">你移到我身上试试，我变颜色给你看</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>

    </ul>


</body>
</html>
复制代码

结果展示

 

posted @   tuyin  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  4_层次选择器
·  3_基本选择器
·  结构伪类选择器-2022-12-23
·  结构伪类选择器
·  结构伪类选择器
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae