Εξηγήστε πώς ο περιηγητής καθορίζει σε ποια στοιχεία…

Ο περιηγητής αναλύει το δέντρο HTML και τους κανόνες CSS, και στη συνέχεια κατασκευάζει το δέντρο απόδοσης (render tree), που συνδέει τα στοιχεία DOM με τα αντίστοιχα στυλ CSS.

Η διαδικασία καθορισμού των στυλ περιλαμβάνει αρκετά βήματα:

Ανάλυση HTML και CSS: Ο περιηγητής αναλύει το έγγραφο HTML, δημιουργώντας ένα δέντρο DOM. Ταυτόχρονα, αναλύει τα στυλ CSS (από ετικέτες <style>, <link> ή inline στυλ), δημιουργώντας ένα δέντρο CSSOM (CSS Object Model).
Ταίριασμα επιλογέων: Ο περιηγητής διατρέχει το δέντρο DOM και αναζητά για κάθε κόμβο στο DOM τους αντίστοιχους κανόνες στο CSSOM. Το ταίριασμα γίνεται από δεξιά προς τα αριστερά. Για παράδειγμα, για τον επιλογέα .parent .child, ο περιηγητής πρώτα αναζητά στοιχεία με την κλάση child, και στη συνέχεια ελέγχει αν έχουν γονέα με την κλάση parent. Αυτή η προσέγγιση επιτρέπει την γρήγορη απόρριψη μεγάλων υποδέντρων που δεν ταιριάζουν με τον επιλογέα.

Κασκάδωση: Όταν για το ίδιο στοιχείο βρεθούν πολλαπλοί κανόνες, ο περιηγητής εφαρμόζει την κασκάδα. Η κασκάδα καθορίζει τη σειρά εφαρμογής των στυλ με βάση:

Τη πηγή των στυλ (στυλ συγγραφέα, χρήστη, περιηγητή).
Την εξειδίκευση των επιλογέων.
Τη σειρά εμφάνισης των κανόνων.
Τη χρήση του !important.

Παράδειγμα εξειδίκευσης:

Τύπος επιλογέα	Πόντοι
Inline στυλ	1000
Επιλογείς ID	100
Κλάσεις, ιδιότητες	10
Ετικέτες, pseudo-στοιχεία	1
Καθολικό (`*`)	0

Οι πιο εξειδικευμένοι επιλογείς έχουν προτεραιότητα.

Κληρονομικότητα: Ορισμένες ιδιότητες CSS κληρονομούνται από τους γονείς στα παιδιά (π.χ., font-size, color). Ο περιηγητής λαμβάνει υπόψη αυτό κατά την εφαρμογή των στυλ.

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

// Παράδειγμα: στοιχείο με πολλαπλούς κανόνες CSS
// HTML: <p class="text">Hello!</p>

/* CSS */
p {  /* Εξειδίκευση: 1 */
  color: blue;
}

.text {  /* Εξειδίκευση: 10 */
  color: red; /* Αυτό το χρώμα θα εφαρμοστεί, επειδή είναι πιο εξειδικευμένο */
  font-size: 16px;
}

p.text { /* Εξειδίκευση: 11 */
   font-weight: bold; /* Αυτή η ιδιότητα θα εφαρμοστεί */
}

/* Η σειρά είναι επίσης σημαντική για επιλογείς με την ίδια εξειδίκευση */
div { color: green; }
div { color: yellow; } /* Θα εφαρμοστεί το κίτρινο */

Έτσι, ο περιηγητής περνάει από τα στάδια ανάλυσης, ταίριασμα, κασκάδα και κληρονομικότητα, για να καθορίσει το τελικό σύνολο στυλ για κάθε στοιχείο πριν από την κατασκευή του δέντρου απόδοσης και την τελική απόδοση.

Εξηγήστε πώς ο περιηγητής καθορίζει σε ποια στοιχεία εφαρμόζονται τα CSS στυλ.