Question

我有以下HTML代码：

        <div id="side">
            <ul class="sideCol sideCol-fixed">
                <li>
                    <div class="user-view" style="background-color: #141E30;">
                        <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
                    </div>
                </li>
                <div class="steps">
                    <li><a href="/link1">Link 1</a></li>
                    <li><a href="/link2">Link 2</a></li>
                    <li><a href="/link3">Link 3</a></li>
                </div>
            </ul>
        </div>

以及CSS中的以下代码：

#side li a:hover{
  color: black;
}

我最近才添加到<a href="https://hypotheticallink">LINK TO EXTERNAL PAGE</a>行中，并且之前设置了css，以便当光标悬停在链接1，链接2和链接3上时，文本变为黑色，而以前的文本为白色。

“ LINK TO EXTERNAL PAGE”锚标记的文本最初也为白色，但是与其他链接不同，我不希望将鼠标悬停在其上时变黑。我尝试过将一个id添加到锚标记（<a id="newid" href="https://hypotheticallink">LINK TO EXTERNAL PAGE</a>）中，然后在样式表中将该css添加到该id中（问题底部的代码），以使其经过悬停时文本变为白色（因此，使其不变成黑色），但这不起作用，文本仍然变成黑色。有人知道如何实现这一目标吗？

#newid:hover{
  color: white;
}

Answer 1

您尝试应用的选择器的CSS特异性较低。

解决方案：使用具有更高特异性的选择器来覆盖此样式。

例如，您可以使用：

.user-view > #newid:hover {
   color: white;
}

或

#side #newid:hover {
  color: white;
}

或

#side li .user-view a:hover {
  color: white;
}

在这里：https://specificity.keegan.st/您可以计算选择器的特异性。

#side li a:hover{
  color: black;
}

具有1.1.2的特异性，

#newid:hover{
  color: white;
}

具有1.1.0的特异性，换句话说，这种样式不太重要，因此不适用。

在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity，您可以阅读更多有关此内容。

Answer 2

您是否尝试添加CSS类？

<div id="side">
    <ul class="sideCol sideCol-fixed">
        <li>
            <div class="user-view" style="background-color: #141E30;">
                <a class="externallink" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
            </div>
        </li>
        <div class="steps">
            <li><a href="/link1">Link 1</a></li>
            <li><a href="/link2">Link 2</a></li>
            <li><a href="/link3">Link 3</a></li>
        </div>
    </ul>
</div>

CSS

.externallink:hover{
  color: white;
}

Answer 3

使用它来选择您的列表项

<div id="side">
        <ul class="sideCol sideCol-fixed">
            <li>
                <div class="user-view" style="background-color: #141E30;">
                    <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
                </div>
            </li>
            <div class="steps">
                <li><a href="/link1">Link 1</a></li>
                <li><a href="/link2">Link 2</a></li>
                <li><a href="/link3">Link 3</a></li>
            </div>
        </ul>
    </div>

css：

.steps :hover { 
     /* your css code here */
     color:black;
  }

删除一个链接的css悬停效果，同时保持其他链接的悬停效果

3 个答案: