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

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

Δεν όλες οι ιδιότητες CSS κληρονομούνται. Εδώ είναι μερικά παραδείγματα κληρονομικών και μη κληρονομικών ιδιοτήτων:

Κληρονομικές ιδιότητες	Μη κληρονομικές ιδιότητες
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

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

/* Ορισμός χρώματος κόκκινο */
body {
  color: red;
}

/* Όλα τα παιδιά στοιχεία του body, χωρίς ορισμένη ιδιότητα color, θα είναι κόκκινα */
p {
  /* Αυτό το παράγραφο θα είναι κόκκινο */
}

/* Υπερκαλύπτουμε την ιδιότητα color για ένα συγκεκριμένο στοιχείο */
div {
  color: blue;
}

/* Το παράγραφο μέσα σε αυτό το div θα είναι μπλε */
div p {
  /* Αυτό το παράγραφο θα είναι μπλε */
}

Χρησιμοποιώντας την κληρονομικότητα, μπορούμε να ορίσουμε κοινά στυλ για μεγάλα μπλοκ περιεχομένου, επιτρέποντας στα παιδιά στοιχεία να τα κληρονομήσουν αυτόματα, εκτός αν δηλωθεί διαφορετικά. Αυτό βελτιώνει τη διαχειρισιμότητα και την αναγνωσιμότητα του κώδικα.