Question

在我的主CSS文件中，我有一个：链接选择器设置为显示白色链接。

a:link{
color: white;
}

但是，我希望另一个DIV（.menuItem）中的链接为黑色。

我正在尝试

.menuItem a:link{
color: black;
}

似乎无法让它发挥作用，所以它可能是错误的......

任何人都可以借这个吗？

Answer 1

.menuItem a:link{
color: black !important;
}

Answer 2

关于Chacha102，我认为解决方案并不理想。 !important是一个kludge，处理这个问题的更好方法是利用文档结构来增加一些特异性。假设您的.menuItem元素有一个共同的父元素，可能是div，其ID为menu，您可以修改特定于菜单的链接样式，如下所示：

#menu a:link {
    color: black;
}

额外的特异性应该使更具体的规则对这些菜单项生效。

Answer 3

立即处理示例代码。但是您的div标签是否具有menuItem的Id或一类menuItem？这是我的猜测。

编辑：好的，现在我明白了。如果你将css分离到另一个文件并使用链接标签将其导入，那么在不使用！important命令的情况下应该没问题，请看：

body {background-color : green;}

a:link{ color : white;}

.menuItem a:link
{
color : black;
}

而且：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div>
    <a href="#">This is a link</a>
</div>
<div class="menuItem">
    <a href="#">This is a link in div menuItem</a>
</div>
</body>
</html>

希望这会有所帮助：）

但是，如果我将css片段嵌入到html中，那么它就不起作用了...想知道为什么？

覆盖a：链接

3 个答案: