复合选择器

最新推荐文章于 2024-01-17 12:02:56 发布

WenYan_a

最新推荐文章于 2024-01-17 12:02:56 发布

阅读量55

点赞数

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/WenYan_a/article/details/125857643

版权

1、伪类链接选择器

用于添加特殊效果

语法

    选择器:伪类{ }

用于设置链接的不同状态

    a:link{ 链接的默认样式 }
    a:visited{ 链接访问过后的样式 }
    a:hover{ 鼠标悬停的样式 }
    a:active{ 鼠标按下的样式 }
    
    a:link {
            color: tomato;
        }

        a:visited {
            color: yellow;
        }

        a:hover {
            color: purple;
        }

        a:active {
            color: greenyellow;
        }

四个伪类状态都有效：L-v-H-a

:hover不仅可以表示链接的悬停，也可以用于其他标签中

/* 鼠标悬停到.box1盒上，让其本身的背景颜色变为蓝色 */
    .box1:hover{
        background-color: lightblue;
    }
/* 鼠标悬停到.box2盒上，让p标签文字颜色变为红色 */
    .box2:hover p{
        color: red;
    }
/* 鼠标悬停到.box3上，让p标签和h3标签的文字颜色都变为blue */
    .box3:hover h3,
    .box3:hover p{
        color: red;
    }
    
    .box3  :hover{
        color: blue;
    }

2、相邻选择器

兄弟之间的hover
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background: tomato;
        }

        .con {
            width: 300px;
            height: 300px;
            height: 0;
            background: yellowgreen;

            transition: 2s;
        }

        .box:hover+.con {
            height: 300px;
            background-color: blue;
        }

    </style>
</head>

<body>
    <div class="box"></div>
    <div class="con"></div>
</body>

</html>