Ειδικότητα CSS

Τι είναι η ειδικότητα;

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

Η ειδικότητα (specificity) θεωρείται ως βαθμός/κατηγορία και μπορεί να καθορίσει ποια τελικά δήλωση στυλ θα εφαρμοστεί στο στοιχείο.

Οι γενικοί επιλογείς (*), έχουν χαμηλή ειδικότητα, ενώ οι επιλογείς με ID έχουν υψηλή ειδικότητα!

Λήψη προσοχής:Αυτή η ειδικότητα είναι συχνή αιτία γιατί οι κανόνες CSS δεν εφαρμόζονται σε ορισμένα στοιχεία, παρά τις προσδοκίες σας που μπορεί να πιστεύετε ότι θα πρέπει να εφαρμόζονται.

Ιεραρχία ειδικότητας

Κάθε επιλογέας έχει τη θέση του στην ιεραρχία της ειδικότητας. Οι εξής τέσσερις κατηγορίες ορίζουν το επίπεδο ειδικότητας των επιλογέων:

Στυλ ενσωματωμένο - Οι ενσωματωμένοι (inline) στυλ προστίθενται άμεσα στο στοιχείο που θα διαμορφωθεί. Παράδειγμα：<h1 style="color: #ffffff;">.

ID - Το ID είναι ο μοναδικός αναγνωριστής του στοιχείου της σελίδας, όπως #navbar.

Κλάσεις, ιδιότητες και ψευδοστοιχεία - Αυτή η κατηγορία περιλαμβάνει .classes, [attributes] και τα ψευδοστοιχεία, όπως :hover, :focus κ.λπ.

Στοιχεία και ψευδοστοιχεία - Αυτή η κατηγορία περιλαμβάνει τα ονόματα στοιχείων και τα ψευδοστοιχεία, όπως h1, div, :before και :after.

Πώς υπολογίζεται η ειδικότητα;

Παρακαλώ θυμάστε τον τρόπο υπολογισμού της ειδικότητας!

Από το 0 ξεκινώντας, προσθέστε 1000 στον style, 100 σε κάθε ID, 10 σε κάθε ιδιότητα, κλάση ή ψευδοστοιχείο, και 1 σε κάθε όνομα στοιχείου ή ψευδοστοιχείο.

Παρακαλώ σκεφτείτε τις τρεις κλάσεις κώδικα:

Παράδειγμα

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Η ειδικότητα του A είναι 1 (ένα στοιχείο)
  • Η ειδικότητα του B είναι 101 (ένας ID αναφοράς και ένα στοιχείο)
  • Η ειδικότητα του C είναι 1000 (στυλ ενσωματωμένο)

Επειδή 1 < 101 < 1000, το τρίτο άρθρο (C) έχει μεγαλύτερη ειδικότητα και θα εφαρμοστεί.

Άρθρο 1:

Σε περιπτώσεις ίδιας ειδικότητας: το πιο πρόσφατο άρθρο είναι σημαντικό - Αν το ίδιο άρθρο γραφτεί δύο φορές στο εξωτερικό αρχείο στυλ, τότε το άρθρο που είναι πιο κοντά στο στοιχείο που θα διαμορφωθεί θα εφαρμοστεί:

Παράδειγμα

h1 {background-color: yellow;}
h1 {χρώμα-βάθος: κόκκινο;}

Δοκιμάστε το προσωπικά

Το επόμενο άρθρο始终 εφαρμόζεται.

Άρθρο 2:

Οι επιλογείς ID έχουν μεγαλύτερη ειδικότητα από τους επιλογείς ιδιοτήτων - Δείτε τις τρεις παρακάτω γραμμές κώδικα:

Παράδειγμα

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Δοκιμάστε το προσωπικά

Το πρώτο άρθρο είναι πιο συγκεκριμένο από τα άλλα δύο και θα εφαρμοστεί.

Άρθρο 3:

οι προσεκτικοί επιλογείς είναι πιο συγκεκριμένοι από τους επιλογείς του μοναδικού στοιχείου - Οι ενσωματωμένοι στυλ είναι πιο κοντά στο στοιχείο που θα διαμορφωθεί. Επομένως, στις εξής περιπτώσεις:

Παράδειγμα

Από εξωτερικό αρχείο CSS:

#content h1 {background-color: red;}

Στο αρχείο HTML:}

<style>
#content h1 {
  χρώμα-βάθος: κίτρινο;
}
</style>

Η επόμενη διάταξη θα εφαρμοστεί.

Άρθρο 4: Ιδιότητες Ειδικότητας

Οι επιλογείς τύπου κλάσης θα νικήσουν οποιοδήποτε αριθμό επιλογέων στοιχείων - Επιλογείς τύπου κλάσης (όπως .intro θα νικήσει h1, p, div κ.λπ.):

Παράδειγμα

.intro {χρώμα-βάθος: κίτρινο;}
h1 {χρώμα-βάθος: κόκκινο;}

Δοκιμάστε το προσωπικά

ΕπιπλέονΟι γενικοί επιλογείς και οι κληρονομικές τιμές έχουν 0 - Η ιδιότητά του * είναι 0, body * και παρόμοια έχουν 0 ιδιότητες. Οι ιδιότητες που αποκτώνται από κληρονομικότητα είναι επίσης 0.