在CSS中設置鏈接的字體顏色

Question

我一直試圖讓我的導航欄鏈接為一種顏色，而主窗口有另一種顏色的鏈接。 我使用的是CSS樣式表和它的作品，但我想我的主規則a是壓倒我已經設置為任何其他規則.leftside導航欄有錯誤的彩色文本。 我甚至試過了!IMPORTANT但除非我刪除了CSS表格中a規則，但似乎仍然無法修復它。 有人能告訴我我做錯了什么嗎？

HTML：

 a { text-decoration: none; color: #303030; } .leftside { position: relative; float: left; margin-top: 70px; width: 10%; height: 600px; background-color: #4C4C33; margin-bottom: 10px; color: white; } 

 <div class="leftside"> <a href="gallery.html">Image Gallery</a> </div> 

Answer 1

.leftside里面的文字實際上是white 。 但在 .leftside 里面 ，有一個<a> 。 您已為<a>定義了單獨的樣式定義，因此將覆蓋 .leftside的顏色。 覆蓋是CSS（ Cascading StyleSheet）背后的主要思想：

使用的規則是通過從更一般的規則級聯到所需的特定規則來選擇的。 選擇最具體的規則。 （ 來源 ）

要解決此問題，您需要將顏色分配給<a> inside .leftside ，這可以通過使用更具體的選擇器完成.leftside a ：

 a { text-decoration: none; color: #303030; } .leftside { position: relative; float: left; margin-top: 70px; width: 10%; height: 600px; background-color: #4C4C33; margin-bottom: 10px; color: white; } .leftside a { color: white; } 

 <div class="leftside"> <a href="gallery.html">Image Gallery</a> </div> 

Answer 2

從你的CSS和HTML我沒有看到你為.leftside div中的鏈接設置特定的顏色。 這是一個如何為鏈接設置css的示例（使用“.leftside a”選擇器）：

HTML

<div class="leftside">
    <!-- navigation link will be red -->
    <a href="gallery.html">Image Gallery</a>
</div>

<!-- non-navigation link will be default color -->
<a href="http://google.com" target="_blank">Visit Google</a>

CSS

a {
    text-decoration: none;
    color: #303030;
}

.leftside {
    position: relative;
    float: left;
    margin-top: 70px;
    width: 10%;
    height: 600px;
    background-color: #4C4C33;
    margin-bottom: 10px;
    color: white;
}

/* here is the selector for the link within the .leftside */
.leftside a {
    color: red;
}

補充筆記

您還可以根據州設置鏈接樣式。 所以要為你的.leftside設置一個鏈接你會做以下（受到W3Schools的啟發）

/* unvisited link */
.leftside a:link {
    color: #FF0000;
}

/* visited link */
.leftside a:visited {
    color: #00FF00;
}

/* mouse over link */
.leftside a:hover {
    color: #FF00FF;
}

/* selected link */
.leftside a:active {
    color: #0000FF;
}