Question

如果我将鼠标悬停在活动前面，则活动的样式将起作用。就像这样

    <div class="E">123123</div>

    <style>
        .E {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .E:hover {
            background-color: blue;
        }
        .E:active {
            background-color: black;
        }
    </style>

当鼠标悬停时，div会变为蓝色，然后单击它会变成黑色。

问题来了。如果我改变了活动的位置并悬停。

    <style>
        .E:active {
            background-color: black;
        }
        .E:hover {
            background-color: blue;
        }
    </style>

每当我悬停或点击div时，颜色始终为蓝色。

为什么？

Answer 1

正如Harry和Lister先生提到的那样，两者具有相同的特异性，所以最新的一个会赢，所以你能做的就是给予特定的css积极活动。

所以不要.E:active尝试div.E:active，而在这种情况下两者都可以。

更新代码

.E {
            width: 200px;
            height: 200px;
            background-color: red;
        } 
        div.E:active {
            background-color: black;
        }

        .E:hover {
            background-color: blue;
        }

为什么它会起作用：因为最后一个选项是悬停所以背景为蓝色，但我们使用了特定的css（带div），然后它也会在点击时显示黑色。

见action

如果我把鼠标悬停在它后面，那么css伪课程就会起作用

1 个答案: