Γιατί οι επιλεγείς στο CSS κληρονομούνται υπερβολικά;

Οι επιλεκτές σε CSS δεν κληρονομούνται. Η κληρονομικότητα στο CSS αναφέρεται στη μεταβίβαση ορισμένων ιδιοτήτων ενός στοιχείου στους απογόνους του. Οι επιλεκτές είναι μοτίβα που επιλέγουν στοιχεία για την εφαρμογή στυλ.

Η κληρονομικότητα μπορεί να σημαίνει ότι τα στυλ που εφαρμόζονται μέσω ενός επιλεκτή μπορούν να υπερισχύσουν (κληρονομηθούν) από στυλ που εφαρμόζονται μέσω άλλου επιλεκτή. Αυτό δεν σχετίζεται με την κληρονομικότητα, αλλά με τον μηχανισμό κασκαδούρας του CSS, που καθορίζει ποια στυλ εφαρμόζονται σε ένα στοιχείο όταν πολλαπλοί κανόνες CSS ορίζουν μια τιμή για την ίδια ιδιότητα.

Παράγοντες που επηρεάζουν την κασκαδούρα και την "υπεροχή" των στυλ:

1. Ειδικότητα (Specificity): Οι επιλεκτές με μεγαλύτερη ειδικότητα έχουν μεγαλύτερο βάρος.
2. Ταξινόμηση (Order): Σε περίπτωση ίσης ειδικότητας, εφαρμόζεται ο κανόνας που δηλώθηκε τελευταίος.
3. Σημαντικότητα (!important): Οι δηλώσεις με !important έχουν την υψηλότερη προτεραιότητα (εκτός από τα ενσωματωμένα στυλ του User Agent με !important).
4. Πηγές στυλ (Origin): Τα στυλ προέρχονται από διαφορετικές πηγές (περιηγητής, χρήστης, συγγραφέας).

Παράδειγμα ειδικότητας:

/* Χαμηλή ειδικότητα */
p {
  color: blue;
}

/* Υψηλή ειδικότητα - θα υπερισχύσει το χρώμα */
.text-section p {
  color: red;
}