Πώς λειτουργούν οι διαφορετικές προτεραιότητες των στυλ στο CSS;

Στο CSS, οι προτεραιότητες των στυλ καθορίζονται μέσω του μηχανισμού κατακράτησης και της ειδικότητας των επιλεκτών. Οι βασικές αρχές είναι:

1. Ειδικότητα — είναι το βάρος του επιλεκτή, που υπολογίζεται βάσει του αριθμού των ID, κλάσεων, ετικετών και άλλων συστατικών. Όσο μεγαλύτερη η ειδικότητα, τόσο μεγαλύτερη η προτεραιότητα του στυλ.

   • Ο επιλεκτής ID (#id) έχει υψηλή προτεραιότητα.
   • Οι κλάσεις (.κλάση), τα χαρακτηριστικά και οι ψευδο-κλάσεις έχουν μεσαία προτεραιότητα.
   • Οι ετικέτες (div, p) έχουν χαμηλή προτεραιότητα.

2. Κατακράτηση — αν δύο κανόνες έχουν την ίδια ειδικότητα, εφαρμόζεται αυτός που δηλώθηκε πιο πρόσφατα.

3. !important — προσθέτει μέγιστη προτεραιότητα στο στυλ, υπερισχύει άλλων κανόνων, εκτός από άλλους !important με μεγαλύτερη ειδικότητα.

4. Κληρονομικότητα — ορισμένες ιδιότητες (color, font-family) κληρονομούνται από τον γονέα αν δεν έχουν οριστεί διαφορετικά.

Παράδειγμα:

#header { color: red; }       /* ειδικότητα 100 */
.menu { color: blue; }        /* ειδικότητα 10  */
div { color: green; }         /* ειδικότητα 1   */

/* Αν ένα στοιχείο έχει id="header" και κλάση="menu", το χρώμα θα είναι κόκκινο */

Έτσι, ο περιηγητής επιλέγει το στυλ με την υψηλότερη ειδικότητα, λαμβάνοντας υπόψη τη σειρά και την παρουσία του !important.