Elsőbbség a css, órák, webreferencia

Egy HTML elem lehet több CSS-szabály célpontja. Példaként használjunk egy egyszerű bekezdést:

Ezt a bekezdést egyszerűen megváltoztathatjuk a címke nevével:

Vagy használhatjuk az osztály nevét:

Vagy használhatjuk az azonosítót:

Mivel a böngésző csak egy színt választhat ki és alkalmazhatja ezt a bekezdést, el kell döntenie, hogy melyik CSS-szabály élvez elsőbbséget a többiekkel szemben. Ezt a CSS (vagy specifikus) prioritásának nevezik.

Példánkban a bekezdés piros lesz. mert az azonosító pontosabb és ezért fontosabb. mint más szelektorok.

A CSS szabályok sorrendje

Ha a CSS-nek ugyanazok a szelektorai vannak, akkor az utolsó lesz elsőbbsége.

Számítástechnika 100

Egy gyors módja annak, hogy megtudja, a CSS-szabály "erős" -e, a választópecifikusság kiszámításával:

A legmagasabb "pontszámmal" rendelkező szelektor érvényesül, függetlenül attól, hogy milyen sorrendben jelenik meg a CSS szabályok.

Szabály # bevezetése pontosabb. mint mások, mert az azonosítóknak egyedinek kell lenniük az egész weboldalon, ezért csak egy célelem lehet.

üzenet minden olyan HTML elemre céloznak, amely az attribútum class = "message", és ezért kevésbé specifikus. Ugyanez vonatkozik a p . amely bármely bekezdésre célozhatja.

A konfliktusok elkerülése

A CSS írása során könnyen ütköző szabályokat alkalmazhat. amelyben ugyanazt a tulajdonságot többször alkalmazzák.

Ennek elkerülése érdekében:

  • csak az osztályokat alkalmazza. Használja a .introduction helyett #introduction. Még akkor is, ha ez az elem csak egyszer jelenik meg a weboldalán;
  • Ne használjon több osztályt egy HTML elemre: írja meg

    . és

    . amely szemantikailag jobban leíró;

  • ne használjon beépített stílusokat. mint például
    .

Kapcsolódó cikkek