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

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"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a> 之前我设置了css，当光标停留在链接1、链接2和链接3上时，文字变成黑色，而之前的文字是白色的。

LINK TO EXTERNAL PAGE "锚标签的文字也是初始化的白色，但与其他链接不同的是，我不希望当我将光标悬停在它上面时，它变成黑色。我试着给锚标签添加了一个id(<a id="newid" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>)，然后在样式表中给该id添加css(代码在问题底部)，使文字在悬停时变成白色(从而达到不变成黑色的目的)，但这并不奏效，文字仍然变成黑色。有谁知道如何实现这个目标？

#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.orgen-USdocsWebCSSSpecificity。 你可以阅读更多关于它。

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