分组选择器和伪类选择器

一，分组选择器

1）什么是分组选择器

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：
div,p {
    color: red;
}

为div标签和p标签统一设置字体为红色的样式。

通常，我们会分两行来写，更清晰：

div,
p{
    color: red;
}

二，伪类选择器

常用的几种伪类选择器 没有访问的超链接a标签样式：

a:link{
    color: blue;
}

访问过的超链接a标签样式：

a:visited{
    color: gray;
}

鼠标悬浮在元素上引用样式：

a:hover{
    background-color: #eee;
}

鼠标点击瞬间的样式：

a:active{
    color: green;
}

input输入框获取焦点时的样式：

inout:focus{
    outline: none;
    background-color: #eee;
}

hover选择器在网页中非常好用，如果是我鼠标悬浮的是父盒子，想让父盒子的子盒子显示出来，这种效果其实也可以用hover选择器。但是我们要将hover选择器和后代选择器结合起来一起用,下面是个例子，大家copy看效果，瞬间就明白,鼠标悬浮alex上 会显示一张图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{
            list-style: none;

        }

        ul li{
            position: relative;
        }
        ul li img{
            display: none;
            position: absolute;
            top: -16px;
            left: 36px;
        }
        ul li:hover img{
            display: block;
        }
    </style>

</head>
<body>

    <ul>
        <li>
             alex
            <img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" >
        </li>


    </ul>

</body>
</html>
posted @ 2021-04-21 17:53  nick_xm  阅读(253)  评论(0)  编辑  收藏  举报