Εάν υπάρχουν δύο ή περισσότεροι κανόνες CSS που δείχνουν το ίδιο στοιχείο, ο επιλογέας με την υψηλότερη τιμή ειδικότητας θα "κερδίσει" και του Η δήλωση στυλ θα εφαρμοστεί σε αυτό το στοιχείο HTML.
Σκεφτείτε την ιδιαιτερότητα ως μια βαθμολογία/κατάταξη που καθορίζει ποια δήλωση στυλ εφαρμόζεται τελικά σε ένα στοιχείο.
Δείτε τα παρακάτω παραδείγματα:
Σε αυτό το παράδειγμα, χρησιμοποιήσαμε το στοιχείο "p" ως επιλογέα και καθορίσαμε ένα κόκκινο χρώμα για αυτό το στοιχείο. Το κείμενο θα είναι κόκκινο:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Τώρα, δείτε το παράδειγμα 2:
Σε αυτό το παράδειγμα, έχουμε προσθέσει έναν επιλογέα κλάσης (με το όνομα "test") και όρισε ένα πράσινο χρώμα για αυτήν την κατηγορία. Το κείμενο θα είναι πλέον πράσινο (παρόλο που το έχουμε καθορίσει ένα κόκκινο χρώμα για τον επιλογέα στοιχείων "p"). Αυτό συμβαίνει επειδή δίνεται ο επιλογέας κλάσης υψηλότερη προτεραιότητα:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Τώρα, δείτε το παράδειγμα 3:
Σε αυτό το παράδειγμα, έχουμε προσθέσει τον επιλογέα id (με το όνομα "demo"). Το κείμενο θα είναι τώρα μπλε, επειδή ο επιλογέας αναγνωριστικού έχει μεγαλύτερη προτεραιότητα:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Τώρα, δείτε το παράδειγμα 4:
Σε αυτό το παράδειγμα, προσθέσαμε ένα ενσωματωμένο στυλ για το στοιχείο "p". ο Το κείμενο θα είναι πλέον ροζ, επειδή το ενσωματωμένο στυλ έχει την υψηλότερη προτεραιότητα:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
Κάθε επιλογέας CSS έχει τη θέση του στην ιεραρχία ειδικοτήτων.
Υπάρχουν τέσσερις κατηγορίες που καθορίζουν το επίπεδο ειδικότητας ενός επιλογέα:
1. Εσωτερικά στυλ - Παράδειγμα:
<h1 style="color: pink;">
2. Αναγνωριστικά - Παράδειγμα:
#navbar
3. Κλάσεις, ψευδοκλάσεις, επιλογείς χαρακτηριστικών - Παράδειγμα:
.test, :hover, [href]
4. Στοιχεία και ψευδοστοιχεία - Παράδειγμα:
h1, ::before
Απομνημονεύστε πώς να υπολογίσετε την ειδικότητα!
Ξεκινήστε από το 0, προσθέστε 100 για κάθε τιμή αναγνωριστικού, προσθέστε 10 για καθεμία τιμή κατηγορίας (ή ψευδο-κλάση ή επιλογέας χαρακτηριστικών), προσθέστε 1 για κάθε επιλογέα στοιχείου ή ψευδοστοιχείο.
Σημείωση: Το ενσωματωμένο στυλ λαμβάνει μια τιμή ειδικότητας 1000 και είναι πάντα δίνεται η ύψιστη προτεραιότητα!
Σημείωση 2: Υπάρχει ένα εξαίρεση σε αυτόν τον κανόνα: εάν χρησιμοποιείτε το !important κανόνα, θα παρακάμψει ακόμη και τα ενσωματωμένα στυλ!
Ο παρακάτω πίνακας δείχνει μερικά παραδείγματα σχετικά με τον τρόπο υπολογισμού των τιμών ειδικότητας:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Ο επιλογέας με την υψηλότερη τιμή ειδικότητας θα κερδίσει και θα τεθεί σε ισχύ!
Εξετάστε αυτά τα τρία τμήματα κώδικα:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>Η ειδικότητα του Α είναι 1 (επιλογέας ενός στοιχείου)
Η ειδικότητα του Β είναι 101 (μια αναφορά αναγνωριστικού + επιλογέας ενός στοιχείου)
Η ιδιαιτερότητα του C είναι 1000 (ενσωματωμένο στυλ)
Δεδομένου ότι ο τρίτος κανόνας (C) έχει την υψηλότερη τιμή ειδικότητας (1000), αυτό το στυλ θα εφαρμοστεί δήλωση.
Ίση ιδιαιτερότητα: ο τελευταίος κανόνας κερδίζει - Εάν ο ίδιος κανόνας γραφτεί δύο φορές στο εξωτερικό φύλλο στυλ, τότε ο τελευταίος κανόνας κερδίζει:
h1 {background-color: yellow;}
h1 {background-color: red;}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Οι επιλογείς αναγνωριστικού έχουν υψηλότερη εξειδίκευση από τους επιλογείς χαρακτηριστικών - Δείτε τις ακόλουθες τρεις γραμμές κώδικα:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
ο πρώτος κανόνας είναι πιο συγκεκριμένος από τους άλλους δύο και επομένως θα εφαρμοστεί.
Οι επιλογείς με βάση τα συμφραζόμενα είναι πιο συγκεκριμένοι από ένα μεμονωμένο στοιχείο επιλογέας - Το ενσωματωμένο φύλλο στυλ είναι πιο κοντά στο στοιχείο που θα διαμορφωθεί. Έτσι στο παρακάτω κατάσταση
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>θα εφαρμοστεί ο τελευταίος κανόνας.
Ένας επιλογέας κλάσης κερδίζει οποιονδήποτε αριθμό επιλογέων στοιχείων - ένας επιλογέας κλάσης όπως .intro κερδίζει h1, p, div, κ.λπ.:
.intro {background-color: yellow;}
h1 {background-color:
red;}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Ο γενικός επιλογέας (*) και οι κληρονομημένες τιμές έχουν ειδικότητα 0 - Ο γενικός επιλογέας (*) και οι κληρονομημένες τιμές αγνοούνται!