Brugere lige nu: 1
Indlæs andet indhold på denne side:
Siden er opdateret 2.7.2007
Med de forskellige måder at definere css med, er det også godt at have styr på, hvorledes browserne tildeler de forskellige definitioner forskellig vægtning (prioritet).
Grundlæggende kan man sige, at inline-css har højere prioritet end et indlejret stylesheet, som igen har højere prioritet end et eksternt css-filer. En definition på en id vil have højere prioritet end en class, hvis begge vil kunne ramme samme element.
Dertil kan så lægges, at hvis man har kald til flere eksterne css-filer og er der i de forskellige css-filer lavet definitioner for samme element, class eller id, vil den sidst indsatte definition overskrive tidligere satte definitioner.
Endelig kan med en speciel tilføjelse sætte trumf på en enkelt definition ved at tilføje, at denne definition er særlig vigtig. Definitionen kan så ikke overskrives af andre definitioner, som ikke har samme vigtighedsdefinition tilføjet:
.foo {
color: #f00 !important;
background-color: #ff0 !important;
}
#bar {
color: #0f0;
background-color: #0ff;
font-style: italic;
}
Med en sådan definition på elementer af class'en .foo vil alle elementer med denne class have rød tekst på gul baggrund, selv om der måske et andet sted er sat en definition på en id #bar, som kan omfatte nogle af elementerne af class'en foo:
<p class="foo">Noget tekst</p>
<p id="bar" class="foo">Noget tekst</p>
<p id="bar"">Noget tekst</p>
Kun de definitioner i #bar, som ikke bliver overtrumfet af definitionerne i .foo, vil have indvirkning på midterste tekstlinje herover. Selv om #bar er defineret efter .foo og selv om en id normalt har højere prioritet end en class.