Jag har ett jobbigt problem med CSS. När jag försöker få olika färger på olika länkar så slutar det oftast med att dom får samma färg allihopa, eftersom en eller annan regel blir giltig för alla.

Exempel:

HTML:
<code>
<div id="main">
Länk1
<fieldset>
Länk2
<div class="test"
Länk3
</div>
</fieldset>
</div>
</code>

CSS:
<code>
#main a {
color: blue;
}

fieldset a {
color: red;
}

.test a {
color: green;
}
</code>

Hur löser jag det på bästa sätt?


Thomas

HTML:
<code>
<div id="main">
<a id="L1" href="#">Länk1</a>
<fieldset>
<a id="L2" href="#">Länk2</a>
<div class="test"
<a id="L3" href="#">Länk3</a>
</div>
</fieldset>
</div>
</code>

CSS:
<code>
#L1 {
color: blue;
}

#L2 {
color: red;
}

#L3 {
color: green;
}
</code>
Eller?
Eller klasser om du har många av varje, förstås.

Jo, så där går det förvisso att göra, men speciellt smidigt är det inte när man har många länkar.
Går det inte att lösa utan att specifikt ange en CSS-regel för varje länk?


Thomas

Det var visst lättare än jag trodde.

CSS:
<code>
#main a {
color: blue;
}

#main fieldset a {
color: red;
}

#main fieldset .test a {
color: green;
}
</code>


Thomas

Alltså... du får ju först tänka ut vilken regel du vill ska gälla för specifika element. Du bör inte specificera neråt i strukturen på det sättet du gör om du inte vill kunna föra vidare det på andra ställen. Det är lite som att definiera klasser som:

.u {
text-decoration: underline;
}

.b{
font-weight: bold;
}

Du går liksom mot själva iden med css.