Question

我有一个<a>标记，其中应用了几个类：

<a href="WhereInTheWorld" class="class1 class2 class3">
    <span class="c10">
        <span class="fas fa-code"></span>
    </span>
    <p>Textual Healing</p>
</a>

我想将a:hover { background-color: black }应用于具有a标签和class1类的任何地方，但是我不确定是否做得正确，或者{ {1}}和class2设置覆盖了class3伪类

我尝试过：

:hover a.class1:hover

和

a class1:hover

这根本不正确。

在我看来，我可以为我的.class1 a:hover标签使用ID，但是不能使用现有的html设置来做到这一点吗？

Answer 1

根据提供的HTML，

a.class1:hover似乎是唯一正确的选择器。 a class1:hover将选择a元素中的所有class1元素，而.class1 a:hover将选择className为class1的元素中的所有a类元素。

考虑级联和特异性的规则。

样式将被覆盖

如果文件下方的位置有相同的选择器
正在使用具有更高特异性的选择器（例如，具有id的选择器）
样式专门设置为子元素

还有一件事：

inline

background-color。您可能要在此元素上设置display: block。

下面是一个示例：https://codepen.io/anon/pen/zQzdEW

CSS伪类应用于具有多个类的“ a”标签

1 个答案: