嵌入式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