[CSS/DIV] Αναλύστε τη χρήση των τεσσάρων κύριων επιλογέων τιμών χαρακτηριστικών CSS

Αυτό το άρθρο θα σας το περιγράψειΕπιλογέας τιμών ιδιοτήτων CSSΗ μορφή του επιλογέα χαρακτηριστικών είναι στοιχείο ακολουθούμενο από παρενθέσεις, με χαρακτηριστικά σε παρένθεση ή εκφράσεις χαρακτηριστικών (δεν ξέρω αν η περιγραφή είναι σωστή, αυτοδημιούργητες λέξεις), όπως h1[title], h1[title="logo"] κ.λπ., πιστεύω ότι θα μάθετε πολλά σε αυτό το άρθρο.

Εκμάθηση CSS: Επιλογέας τιμής χαρακτηριστικού CSS

CSS AttributeSelectors, ίσως δεν πρέπει να είστε εξοικειωμένοι με τους επιλογείς χαρακτηριστικών, στην ουσία, οι επιλογείς id και class είναι στην πραγματικότητα επιλογείς τιμών χαρακτηριστικών, απλώς επιλέξτε την τιμή id ή class.

Η μορφή του επιλογέα χαρακτηριστικών είναι στοιχείο ακολουθούμενο από παρενθέσεις, με χαρακτηριστικά σε παρένθεση ή εκφράσεις χαρακτηριστικών (δεν ξέρω αν η περιγραφή είναι σωστή, αυτοδημιούργητες λέξεις), όπως h1[title], h1[title="Logo"] κ.λπ., μπορείτε να δείτε 4 συγκεκριμένες μορφές από τη συζήτησή μου παρακάτω.

1. Απλός επιλογέας τιμής χαρακτηριστικού CSS

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

h1[τάξη]{χρώμα: ασημί; θα δράσει σε οποιοδήποτε στοιχείο H1 με κλάση, ανεξάρτητα από την τιμή της κλάσης. Επομένως<h1class="hoopla">Γεια σας</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 του Fooling</h1> θα επηρεαστεί από αυτόν τον κανόνα.

Φυσικά, αυτή η "ιδιότητα" δεν είναι απλώς μια κλάση ή id, αλλά μπορεί να είναι όλες οι νόμιμες ιδιότητες του στοιχείου, όπως το alt του img, όπως το img[alt]{cssdeclarationshere; θα εφαρμοστεί σε οποιοδήποτε στοιχείο img με το χαρακτηριστικό alt. Στη συνέχεια, a[href][title]{font-weight:bold; Τι γίνεται με το }; Όπως γνωρίζετε, αυτό λειτουργεί σε στοιχεία με χαρακτηριστικά href και title, όπως <atitle="W3CHome">W3C</a>.

2. Ακριβής επιλογέας τιμής χαρακτηριστικού CSS

Το ID και η κλάση είναι ουσιαστικά ακριβείς επιλογείς τιμών χαρακτηριστικών, ναι, το h1#logo ισούται με το h1[id="logo"]. Όπως αναφέρθηκε προηγουμένως, δεν περιοριζόμαστε σε ταυτότητα ή τάξη, μπορούμε να χρησιμοποιήσουμε οποιαδήποτε ιδιότητα! Για παράδειγμα, a[][title="W3CHome"]{font-size:200%; } θα εφαρμοστεί στο <atitle="W3CHome">W3C</a>.

3. Ορισμένοι επιλογείς τιμών χαρακτηριστικών CSS

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

Οποιοδήποτε από αυτά μπορεί να κάνει τη γραμματοσειρά του p έντονη.

Αυτός ο επιλογέας είναι πολύ χρήσιμος, για παράδειγμα, εάν θέλετε να διαμορφώσετε μια εικόνα με τη συμβολοσειρά "Εικόνα" στον τίτλο της, π.χ. title="Εικόνα5:xxx περιγραφή", μπορείτε να χρησιμοποιήσετε το img[title~="Εικόνα"].

Θα πρέπει να σημειωθεί ότι όπως τόνισα στην πρώτη πρόταση, πρέπει να ταιριάξετε ολόκληρη τη λέξη και το img[title~="Figure"] δεν θα ταιριάζει με το title="Figure5:xxx description".

Επίσης, έκανα μια μικρή δοκιμή, αλλάζετε το "Figure" σε "Illustration" στο παράδειγμα και αλλάζετε το img[title~="Figure"] σε img[title~="Illustration"], και εξακολουθεί να ταιριάζει στον Firefox, ανεξάρτητα από το αν η κωδικοποίηση είναι GB2312 ή UTF-8. Φαίνεται ότι η υποστήριξη CSS για τα κινέζικα δεν είναι κακή.

4. Ειδικός επιλογέας τιμής χαρακτηριστικού CSS

Κάπως περίεργο, αυτός ο επιλογέας. Λειτουργεί έτσι, λοιπόν, είναι πιο εύκολο να δώσεις ένα παράδειγμα παρά να το περιγράψεις.

*[lang|="en"]{color:white; Αυτός ο κανόνας θα επιλέξει την τιμή του χαρακτηριστικού lang ή του στοιχείου που ξεκινά με en-. Δηλαδή, μπορεί να ταιριάζει με <h1lang="en">Hello!</h1>, <plang="en-us">Χαιρετισμούς!</p>και <divlang="en-au">G'day!</div>και δεν ταιριάζει<plang="fr">Bonjour!</p>και <h3lang="cy-en">Jrooana!</h3>.