Okay, jeg tror, jeg er noget mere frisk nu, så jeg prøver at forklare:
Det kommer ikke bag på nogen, at når jeg skriver:
.en-regel {
color: red;
border: 1px solid white;
}
.en-regel {
color: blue;
}
så bliver teksten i et div med klassen 'en-regel' blå og border'en bliver hvid. Den sidste overskriver den første ved fælles properties (her tekstfarven).
Det samme gælder, hvis div'et ligger i en <td> og jeg skriver:
td.en-regel {
color: red;
border: 1px solid white;
}
td.en-regel {
color: blue;
}
... eller:
.en-regel {
color: red;
border: 1px solid white;
}
td.en-regel {
color: blue;
}
Skriver jeg derimod:
td.en-regel {
color: red;
border: 1px solid white;
}
.en-regel {
color: blue;
}
kan den sidste regel ikke overskrive den første og teksten forbliver rød ... hvorfor nu det?
Fordi i kaskaden af stylesheets har de forskellige selectorer forskellig 'vægt' - som det vises i figuren bag det link, jeg skrev i mit seneste indlæg. I princippet kan man sige, at jo bedre specificeret selektor er, desto 'tungere' er reglen.
Hvis jeg skriver:
.klasse-1 {
background-color: blue;
}
.klasse-1.klasse-2 {
color: white;
background-color: red;
}
<div class="klasse-1">
<div class="klasse-2">bla bla bla</div>
</div>
... svarer inner-div'ets egenskaber til, hvis jeg havde ét div med begge klasser:
.klasse-1 {
background-color: blue;
}
.klasse-2 {
color: white;
background-color: red;
}
<div class="klasse-1 klasse-2">bla bla bla</div>
'klasse-2' udvider 'klasse-1' - og hvis de har ens properties, overskrives disse properties i klasse-1 af dem i klasse-2. Den sidste overskriver den første.
Bytter jeg om på de to: class="klasse-2 klasse-1", bliver baggrundsfarven naturligvis blå.
MEN ... som vi så før, kan dette kun ske, hvis de to selektorer har samme 'vægt' - samme specifity ... eller hvis den sidste selektor har højere specifity.
... QED! :)
