删除一个 link 的 css 悬停效果，同时为其他 link 保持相同的悬停效果

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 以便当光标悬停在 Link 1、Link 2 和 Link 3、文字变黑，之前的文字是白色。

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

#newid:hover{
  color: white;
}

Answer 1

您是否尝试添加 css class？

<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 2

您尝试应用的选择器具有较低的 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 3

用它来 select 您列出的项目

<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;
  }

删除一个 link 的 css 悬停效果，同时为其他 link 保持相同的悬停效果

removing css hover effect of one link while keeping same hover effect for other links

html

css

hover