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

我想覆盖链接的背景和字体颜色。嵌入式CSS不会覆盖链接样式表中的CSS

<!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  
}

来源

2013-09-30 bonaca

http://www.w3.org/TR/CSS21/cascade.html#specificity – CBroe

解决，谢谢大家！ – bonaca

你有一个特殊性的问题。

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

你可以很容易地使用#divL #abc，这将使嵌入式规则更具体。

来源

2013-09-30 11:06:22

使用background-color和:link

#abc{ 
    background-color :#fff; 

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

代替。 :link在这里是适当的子类。颜色只会更改<div>的一般颜色，例如未锚文本内容..

来源

2013-09-30 11:06:25 davidkonrad

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

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

来源

2013-09-30 11:07:05 RiKo

'！important'不是必需的，只是让选择器更具体。过度使用'！important'会导致难以维护的样式表，特别是对于复杂的规则集。 –

+1 ...是的，使用更具体的选择器也方法。我赞同你。 – RiKo

呀！你曾经说过，#divL a{....}的作品，因为它是通过选择父DIV选择更专一，如果你不能只是#abc{....}覆盖，那么你可以把！重要的最后这样

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

即使它不工作，你应该通过选择更特异的div尝试是你必须声明#divL a是工作

，如果任何时候如果选择连父DIV不工作，那么你可以使用体选择这样

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

此外，如果你想设置，则背景颜色使用background-color比background

来源

2013-09-30 11:07:35

'！important'不是必需的，只是让选择器更具体。过度使用'！important'会导致难以维护的样式表，特别是对于复杂的规则集。 –

使用!important强制浏览器给这个值优先

例如一个提示你background-color: red !important;

来源

2013-09-30 11:09:01

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

回答

相关问题