Embedded CSS doesn't overwrite CSS in linked stylesheet
Question
I want to overwrite background and font color of a link.
<!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
}
5 answers
solution1
2 ACCPTED 2013-09-30 11:06:22
You have a specificity issue.
The #divL a selector is more specific than #abc .
You could easily use #divL #abc and that would make the embedded rule more specific.
solution2
1 2013-09-30 11:06:25
Use background-color and :link
#abc{
background-color :#fff;
}
#abc:link {
color:#008080;
}
instead. :link is the appropriate subclass here. color will only change the general color of the <div> , eg the content that is not anchor text..
solution3
1
In this case You have to use !important
#abc{
background:#ffffff !important;
color:#008080 !important;
}
solution4
1 2013-09-30 11:07:35
Yeah! you have said that #divL a{....} works because it is selecting more specificity by selecting parent div if you can't override by just #abc{....} then you could place !important at last like this
#abc{
background:#ffffff !important;
color:#008080 !important;
}
Even if it is not working you should try by selecting more specificity div that is you have declared that #divL a is works
and if anytime if selecting even parent div doesn't work then you could use body selector like this
body #abc{
background:#ffffff;
color:#008080;
}
Also one hint for you if you would like to set background color then use background-color than background
solution5
0 2013-09-30 11:09:01
use !important to force the browser to give this value priority
Eg background-color: red !important;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.