使用CSS部分刪除超鏈接

Question

我有兩個div，我想從第一個div中刪除超鏈接下划線，然后在第二個div中顯示超鏈接。 我用css文件做了這些修改，下面是代碼

a:hover, a:visited, a:link, a:active{
   text-decoration: none;
   color:#000000;
}

當我使用上面的代碼時，它會影響所有超鏈接，但我只想從類home和僅關於類中刪除超鏈接。 你能給我解決方法嗎？ div標簽是

<div>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
</ul>
</div>
<div>
<ul>
<li class="clients"><a href="#">Clients</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</div>`

Answer 1

您應在鏈接聲明之前使用此類，如下所示：

.home a:hover, 
.home a:visited, 
.home a:link, 
.home a:active,
.about a:hover, 
.about a:visited, 
.about a:link, 
.about a:active{
  text-decoration: none;
  color:#000000;
  cursor: pointer;
}

cursor:pointer將hiperlink“手”光標更改為標准箭頭。

Answer 2

通過指定類選擇器，應該只為“ home”和“ about”鏈接添加類選擇器 ：

.home a,
.about a {
   text-decoration: none;
   color:#000000;
}

因為你的規則

a:hover, a:visited, a:link, a:active{
    text-decoration: none;
    color:#000000;
}

將text-decoration: none對頁面上的所有 <a>元素text-decoration: none應用。

Answer 3

您可以通過以下幾種方法進行操作：

.home a, .about a{
  text-decoration:none;
}

ul:first-of-type li a{
  text-decoration:none;
}

您不需要添加任何:link ， :active :visited因為普通的a可以捕獲所有內容。

您可以進一步添加其他樣式，使其看起來像“普通”文本。

color:#000000 /*black text*/
cursor:pointer; /*normal arrow cursor*/