Question

我想覆盖链接的背景和字体颜色。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link href="index.css" rel="stylesheet"/>
<style>
#abc{
    background:#ffffff; // doesn't work
    color:#008080;  // doesn't work
}
</style>
</head>

<body>
<?php include 'inc/menum.php';?>

menum.php

<div id="divL">
<a href='abc.php' id='abc'>ABC</a>
<a href='universe.php' id='universe'>UNIVERSE</a>
<a href='strel.php' id='strel'>STREL</a>
</div>

index.css

#divL  a{
background:#008080;     // works    
color:#ffffff;  // works    
}

Answer 1

您有特异性问题。

#divL a选择器比#abc更具体。

您可以轻松使用#divL #abc，这会使嵌入式规则更具体。

Answer 2

使用background-color和:link

#abc{
    background-color :#fff; 

}
#abc:link {
    color:#008080;
}

代替。 :link是这里的合适子类。 color只会改变<div>的一般颜色，例如不是锚文本的内容..

Answer 3

在这种情况下，您必须使用!important

#abc{
    background:#ffffff !important;
    color:#008080 !important;
}

Answer 4

呀！你说过#divL a{....}是有效的，因为如果你不能只用#abc{....}覆盖那么选择父div就会选择更多的特异性然后你可以放置！重要的是这样的

#abc{
    background:#ffffff !important;
    color:#008080 !important;
}

即使它不起作用，您也应该尝试选择更多特殊性div，即已声明#divL a正在工作

如果任何时候如果选择偶数父div不起作用，那么你可以像这样使用身体选择器

body #abc{
    background:#ffffff;
    color:#008080;
}

如果您想设置背景颜色，请使用background-color而不是background

Answer 5

使用!important强制浏览器为此值赋予优先级

E.g。 background-color: red !important;

嵌入式CSS不会覆盖链接样式表中的CSS

5 个答案: