Kaskaden är det som gör CSS stilark så användbara. Kort sagt definierar kaskaden prioriteringsordningen för hur motstridiga stilar ska tillämpas. Med andra ord, om du har två stilar:
p {färg: röd; }p {färg: blå; }
Kaskaden bestämmer vilken färg styckena ska vara, även om stilarket anger att de ska vara både röda och blåa. I slutändan kan endast en färg tillämpas på stycken, så det måste finnas en order. Och denna ordning tillämpas av vilka väljare (the p
i ovanstående exempel) har högsta prioritet och vilken ordning de visas i dokumentet.
Följande lista är en förenkling av hur din webbläsare bestämmer prioritet för en stil:
- Se i stilarket för en väljare som matchar elementet. Om det inte finns några definierade stilar, använd sedan standardreglerna i webbläsaren
- Titta på stilarket för markörer som är markerade
!Viktig
och tillämpa dem på lämpliga delar. - Alla stilar i stilarket kommer att åsidosätta standardwebbläsarstilar (förutom när det gäller användarstilark).
- Ju mer specifika stilväljaren desto högre prioritet kommer den att ha. Till exempel,
div> p.class
är mer specifik änp.class
vilket är mer specifikt änp
. - Slutligen, om två regler gäller för samma element och har samma väljarrangemang, den som laddades sista kommer att tillämpas. Med andra ord läses stilarken från topp till botten, och stilar appliceras ovanpå varandra.
Baserat på dessa regler, i ovanstående exempel, skulle stycken skrivas i blått, eftersom p {färg: blå; }
kommer sist i stilarket.
Detta är en mycket förenklad förklaring av kaskaden. Om du är intresserad av att lära dig mer om hur kaskaden fungerar, bör du läsa Vad betyder "Cascade" i Cascading Style Sheets ?.