为什么我的 CSS 锚样式被覆盖？

Question

我正在尝试重新主题ScrewTurn Wiki。该页面有一个基本结构，记录在此处：

螺丝旋转 Wiki 主题参考

对于不同类型的链接，有一些预定义的类，例如：

a, a:link, a:active {
    color: #ffffff;
    text-decoration: none;
}
a:hover {
    color: #D9671E;
    text-decoration: underline;
}

a.externallink {
    background-image: url(Images/ExternalLink.gif);
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 14px;
}
a.internallink {
}

/* Link to a .aspx page */
a.systemlink {
}

/* Link to a Wiki page */
a.pagelink {
}

我需要根据它们所在的容器更改这些链接的颜色。原因是我的标题是深蓝色而侧边栏是白色的。

我试过这个：

/* Make header links white because of dark background */
#HeaderDiv a.pagelink, a.systemlink, a.externallink {
    color: white;
}

#SidebarDiv a.pagelink, a.systemlink, a.externallink {
    color: darkblue;
}

但是#SideBarDiv颜色会覆盖#HeaderDiv链接。该SideBarDiv容器是不是一个孩子HeaderDiv。

容器中的链接只是根据它们的作用设置类，即：

<a href=".." class="systemlink">Logon</a>
<a href=".." class="pagelink">Some wiki article</a>

我在这里缺少什么？请记住，当谈到 CSS 时，我是一个完整的新生。

Answer 1

您需要a使用它们各自的divID 选择器来限定所有选择器：

#HeaderDiv a.pagelink, #HeaderDiv a.systemlink, #HeaderDiv a.externallink {
    color: white;
}

#SidebarDiv a.pagelink, #SidebarDiv a.systemlink, #SidebarDiv a.externallink {
    color: darkblue;
}

否则，第二个规则集的最后两部分最终会覆盖页面中所有 a.systemlink和a.externallink元素的样式。