Επεξήγηση Επιλογέα Αξίας CSS

Το CSS 2 εισήγαγε τους επιλογείς ιδιοτήτων.

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

Απλοί επιλογείς ιδιοτήτων

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

Παράδειγμα 1

Αν επιθυμείτε να κάνετε όλους τους στοιχεία που περιέχουν τίτλο (title) κόκκινα, μπορείτε να γράψετε:

*[title] {color:red;}

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

Παράδειγμα 2

Παρόμοια με το παραπάνω, μπορείτε να εφαρμόσετε στυλ μόνο στους αγκυρές (αρχεία a) με την ιδιότητα href:

a[href] {color:red;}

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

Παράδειγμα 3

Αν επιθυμείτε να επιλέξετε με βάση πολλαπλές ιδιότητες, απλά συνδέστε τους επιλογείς ιδιοτήτων.

Για παράδειγμα, για να κάνετε το κείμενο των HTML σύνδεσμων που έχουν τόσο την ιδιότητα href όσο και την ιδιότητα title κόκκινο, μπορείτε να γράψετε ως εξής:

a[href][title] {color:red;}

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

Παράδειγμα 4

Μπορείτε να χρησιμοποιήσετε αυτή τη λειτουργία με δημιουργικούς τρόπους.

Για παράδειγμα, μπορείτε να εφαρμόσετε στυλ σε όλες τις εικόνες με την ιδιότητα alt, ώστε να επισημάνετε αυτές τις έγκυρες εικόνες:

img[alt] {border: 5px solid red;}

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

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

Παράδειγμα 5: Χρήση επιλογέων ιδιοτήτων σε έγγραφα XML

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

Ας υποθέσουμε ότι σχεδιάσαμε έναν XML έγγραφο για την περιγραφή των πλανητών του ηλιακού μας συστήματος. Αν θέλουμε να επιλέξουμε όλους τους στοιχεία planet με την ιδιότητα moons και να τα εμφανίσουμε σε κόκκινο, ώστε να προσελκύσουμε την προσοχή στις πλανήτες με moons, μπορούμε να γράψουμε ως εξής:

planet[moons] {color:red;}

Αυτό θα κάνει τον κείμενο των δεύτερου και τρίτου στοιχείων των παρακάτω σημειώσεων να εμφανίζονται σε κόκκινο, αλλά το κείμενο του πρώτου στοιχείου δεν θα είναι κόκκινο:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Ελέγξτε την επίδραση;

Επιλογή με βάση συγκεκριμένες τιμές ιδιοτήτων

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

Παράδειγμα 1

Για παράδειγμα, αν θέλετε να κάνετε κόκκινο έναν σύνδεσμο που οδηγεί σε μια συγκεκριμένη δοκίμιο στο διακομιστή Web, μπορείτε να γράψετε ως εξής:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

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

Παράδειγμα 2

Παρόμοιο με απλούς επιλογείς ιδιοτήτων, μπορείτε να συνδέσετε πολλαπλούς επιλογείς ιδιοτήτων-τιμών για να επιλέξετε έναν έγγραφο.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Αυτό θα μετατρέψει τον πρώτο σύνδεσμο κειμένου των παρακάτω σημειώσεων σε κόκκινο, αλλά ο δεύτερος ή τρίτος σύνδεσμος δεν θα επηρεαστεί:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

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

Παράδειγμα 3

Επίσης, η γλώσσα XML μπορεί να χρησιμοποιήσει αυτόν τον τρόπο για να ρυθμίσει τη μορφή;

Τώρα, επανέρχουμε στον παράδειγμα των πλανητών. Αν θέλετε να επιλέξετε τα στοιχεία planet με την τιμή της ιδιότητας moons 1:

planet[moons="1"] {χρώμα: κόκκινο;}

Το παρακάτω κώδικας θα κάνει το δεύτερο στοιχείο του παρακάτω σηματοποίηματος κόκκινο, αλλά το πρώτο και το τρίτο στοιχείο δεν θα επηρεαστούν;

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Ελέγξτε την επίδραση;

Η ιδιότητα και η τιμή της ιδιότητας πρέπει να συμφωνούν πλήρως;

Παρακαλώ σημειώστε ότι αυτή η μορφή απαιτεί πλήρη συμφωνία με την τιμή της ιδιότητας;

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

Παρακαλώ λάβετε υπόψη σας τον παρακάτω κλάσμα σηματοποίησης:

<p class="σημαντικός προειδοποίηση">Αυτός ο παράγραφος είναι μια πολύ σημαντική προειδοποίηση.</p>

Αν γράψετε p[class="σημαντικός"], τότε αυτός ο κανόνας δεν θα ταιριάζει στο παράδειγμα σηματοποίησης;

Για να επιλέξετε το στοιχείο με βάση την συγκεκριμένη τιμή της ιδιότητας, πρέπει να γράψετε ως εξής:

p[class="σημαντικός προειδοποίηση"] {χρώμα: κόκκινο;}

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

Επιλογή με βάση την επιλογή μέρους τιμής ιδιοτήτων;

Αν χρειάζεται να επιλέξετε με βάση μια λίστα λέξεων από την τιμή της ιδιότητας, πρέπει να χρησιμοποιήσετε το λάμπαλο (~);

Αν θέλετε να επιλέξετε στοιχεία με την ιδιότητα class που περιέχει το significant, μπορείτε να το κάνετε με τον παρακάτω επιλογέα:

p[class~="σημαντικός"] {χρώμα: κόκκινο;}

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

Αν παραλείψετε το λάμπαλο, σημαίνει ότι πρέπει να ολοκληρώσετε την πλήρη συμφωνία τιμής;

Η διαφορά μεταξύ επιλογέα μέρους τιμής ιδιοτήτων και σημείου κλάσης.

Ο επιλογέας είναι ισότιμος με αυτόν που έχουμε συζητήσει στη σημείωση της κλάσης.

Γιατί δηλαδή, p. σημαντικός και p[class="σημαντικός"] είναι ισότιμοι όταν εφαρμόζονται στο έγγραφο HTML;

Τότε, γιατί πρέπει να υπάρχει ο επιλογέας ιδιότητας "~=";

Παράδειγμα, μπορεί να υπάρχει ένα έγγραφο με πολλές εικόνες, από τις οποίες μόνο μερικές είναι εικόνες. Για αυτό, μπορεί να χρησιμοποιηθεί ένας επιλογέας βάσει της συνάρτησης title του μέρους του εγγράφου, για να επιλέξει αυτές τις εικόνες:

img[title~="Εικόνα"] {κεραία: 1px ανοιχτόγκραυλο;}

Αυτή η ρύθμιση θα επιλέξει όλες τις εικόνες με κείμενο title που περιέχει "Figure". Οι εικόνες χωρίς την ιδιότητα title ή που δεν περιέχουν το "Figure" δεν θα αντιστοιχιστούν.

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

Επιλογείς με μέρος τιμής

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

Πολλοί σύγχρονοι περιηγητές υποστηρίζουν αυτούς τους επιλογείς, συμπεριλαμβανομένου του IE7.

Η παρακάτω τаблицή είναι μια απλή σύνοψη αυτών των επιλογέων:

Τύπος Περιγραφή
[abc^="def"] Επιλέξτε όλα τα στοιχεία με την τιμή της ιδιότητας abc που ξεκινά με "def".
[abc$="def"] Επιλέξτε όλα τα στοιχεία με την τιμή της ιδιότητας abc που τελειώνει με "def".
[abc*="def"] Επιλέξτε όλα τα στοιχεία με την τιμή της ιδιότητας abc που περιέχει το υποσύνολο "def".

Φαντάζεστε ότι αυτές οι επιλογές έχουν πολλές χρήσεις.

Για παράδειγμα, αν θέλετε να εφαρμόσετε στυλ σε όλους τους δεσμούς που οδηγούν στο CodeW3C.com, δεν χρειάζεται να καθορίσετε class για όλους αυτούς τους δεσμούς και να γράψετε στυλ για αυτήν την κλάση, αλλά απλώς να γράψετε τη ακόλουθη ρύθμιση:

a[href*="codew3c.com"] {color: red;}

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

Σημείωση:Οποιοδήποτε χαρακτηριστικό μπορεί να χρησιμοποιηθεί με αυτούς τους επιλογείς.

Τύπος επιλογέα χαρακτηριστικών

Τώρα θα σας παρουσιάσω τον συγκεκριμένο επιλογέα χαρακτηριστικών. Δείτε τον παρακάτω παράδειγμα:

*[lang|="en"] {color: red;}

Αυτή η ρύθμιση θα επιλέξει κάθε στοιχείο με την ιδιότητα lang ισότιμη με en ή ξεκινώντας με en- και δεν θα επιλέξει τα επόμενα δύο στοιχεία:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

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

Γενικά, [att|="val"] μπορεί να χρησιμοποιηθεί για οποιοδήποτε χαρακτηριστικό και τιμή.

Ας υποθέσουμε ότι ένας HTML έγγραφος περιέχει μια σειρά από εικόνες, όπου το όνομα αρχείου κάθε εικόνας έχει τη μορφή figure-1.jpg και figure-2.jpgΜε αυτόν τον επιλογέα μπορείτε να αντιστοιχίσετε όλα αυτά τα εικόνες:

img[src|="figure"] {border: 1px solid gray;}

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

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

Εκπαιδευτικό Υλικό Επεξήγησης Επιλογέων CSS

Επιλογέας Περιγραφή
[attribute] Χρησιμοποιείται για την επιλογή στοιχείων που έχουν καθορισμένη αξία属性的.
[attribute=value] Χρησιμοποιείται για την επιλογή στοιχείων που έχουν καθορισμένη αξία属性的.
[attribute~=value] Χρησιμοποιείται για την επιλογή στοιχείων που περιέχουν την καθορισμένη λέξη.
[attribute|=value] Χρησιμοποιείται για την επιλογή στοιχείων που έχουν αξία属性的 που ξεκινά με την καθορισμένη τιμή και πρέπει να είναι ολόκληρη η λέξη.
[attribute^=value] Ταυτόχρονα ταιριάζει σε κάθε στοιχείο που ξεκινά με την καθορισμένη τιμή.
[attribute$=value] Ταυτόχρονα ταιριάζει σε κάθε στοιχείο που τελειώνει με την καθορισμένη τιμή.
[attribute*=value] Ταυτόχρονα ταιριάζει σε κάθε στοιχείο που περιέχει την καθορισμένη τιμή.