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

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{....}之所以#divL a{....} ，是因为它不能通过仅#abc{....}覆盖而通过选择父div选择更多的特异性，那么您可以像这样最后放置！important

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

即使它不起作用，您也应该尝试通过选择更多的div来声明#divL a是有效的

如果在任何时候即使选择父div都不起作用，则可以使用这样的主体选择器

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

如果您要设置背景色，那么也可以使用一个提示，而不是background background-color

Answer 5

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

例如background-color: red !important;

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

问题描述

5 个解决方案

解决方案1
2 已采纳 2013-09-30 11:06:22

解决方案2
1 2013-09-30 11:06:25

解决方案3
1

解决方案4
1 2013-09-30 11:07:35

解决方案5
0 2013-09-30 11:09:01

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

问题描述

5 个解决方案

解决方案1 2 已采纳 2013-09-30 11:06:22

解决方案2 1 2013-09-30 11:06:25

解决方案3 1

解决方案4 1 2013-09-30 11:07:35

解决方案5 0 2013-09-30 11:09:01

解决方案1
2 已采纳 2013-09-30 11:06:22

解决方案2
1 2013-09-30 11:06:25

解决方案3
1

解决方案4
1 2013-09-30 11:07:35

解决方案5
0 2013-09-30 11:09:01