Question

我正在尝试重新定位ScrewTurn Wiki。页面的基本结构在此处记录：

ScrewTurn Wiki Theming Reference

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

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 ID选择器限定所有div选择器：

#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元素的样式。

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

1 个答案: