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背后的主要思想（层叠 StyleSheet）：

使用的规则是通过从更一般的规则级联到所需的特定规则来选择的。 选择最具体的规则。（source）

要解决此问题，您需要将颜色分配给 <a>内的.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;
}

在CSS中设置链接的字体颜色

2 个答案: