Forklaring på problem med at overstyre css
Jeg har lidt problemer med at forstå hvorfor nogle af mine styles ikke bliver påført. Jeg har lavet dette lille eks:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.boxtxt, .boxtxt a:link, .boxtxt a:visited, .boxtxt a:active, boxtxt a:hover{
font-size:11px;
font-family: Verdana, arial, helvetica, sans-serif;
font-style: normal;
line-height: 13pt;
font-weight:normal;
text-transform: normal;
text-decoration: none;
color:#595f5d;
}
.boxtxt a:hover{
text-decoration: underline;
}
.linkStyle1{
font-size:20px;
}
.linkStyle2{
font-size:24px !important;
}
</style>
</head>
<body>
<div class="boxtxt">
Her er noget tekst!!<br>
<a href="/side.htm">link 1</a><br>
<a href="/side.htm" class="linkStyle1">link 2</a><br>
<a href="/side.htm" class="linkStyle2">link 3</a><br>
<a href="/side.htm" class="linkStyle2" style="font-size:30px ;">link 4</a><br>
<a href="/side.htm" class="linkStyle2" style="font-size:30px !important;">link 5</a><br>
</div>
</body>
</html>
For at tage dem en af gangen:
Link 1: er som jeg havde forventet.
Link 2: har classen linkStyle1 (med size 20px), men den bliver ikke påført. Istedet bibeholder den stylen som sættes via parent elementet (boxtxt a:link)
Link 3: er som Link 2 men dennes class har !important på size og derfor virker den.
Link 4: er som link 3, men med inline style. Men inline style bliver ikke påført fordi classen er !important. Jeg ville mene at inline var vigtigere uanset hvad classen er sat til. Men jeg kan god lidt forstå hvorfor classen bliver påført og ikke inline.
Link 5: som Link 4 men med !important på inline style og derfor virker den.
Mit problem ligger i at forstå hvorfor Link 2 ikke fungere. Den har en class, men får stadig påført det der er sat via parent.
At jeg så kan løse det med !important er fint, men har jeg en untagelse til reglen, og vil påføre den inline skal man huske !important her også. Men det er selvfølgelig noget man bare må huske.
Men som sagt. Er der nogen der kan forklare mig hvorfor Link 2 ikke virker, og kan man få den til det UDEN brug af !important?
