Κατηγορία - CSS-Κόλπα

Ένας επιλογέας τάξεων στο CSS ξεκινά με μια τελεία (.), Ως εξής:

.class ( )

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

Για παράδειγμα, αυτό το στοιχείο:

Push Me

έχει επιλεγεί και έχει στυλ ως εξής:

.big-button ( font-size: 60px; )

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

.\3A \`\( ( /* matches elements with class=":`(" */ )

Ένα στοιχείο μπορεί να έχει περισσότερες από μία κλάσεις:


 This paragraph will get styles from .intro and .blue selectors.

Ένα στοιχείο με πολλαπλές τάξεις διαμορφώνεται με τους κανόνες CSS για κάθε τάξη. Μπορείτε επίσης να συνδυάσετε πολλές κατηγορίες για να επιλέξετε στοιχεία:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Αυτή η επίδειξη δείχνει πώς οι επιλογείς μιας κατηγορίας διαφέρουν από τους συνδυασμένους επιλογείς:

Μπορείτε επίσης να περιορίσετε έναν επιλογέα τάξης σε ένα συγκεκριμένο είδος στοιχείου, το οποίο μερικές φορές ονομάζεται "κατάλληλη ετικέτα":

ul.menu ( list-style: none; )

Ειδικότητα

Από μόνη της, ένας επιλογέας τάξης έχει τιμή εξειδίκευσης 0, 0, 1, 0. Αυτό είναι "πιο ισχυρό" από έναν επιλογέα στοιχείων (όπως:) a ( )αλλά λιγότερο ισχυρό από έναν επιλογέα αναγνωριστικών (όπως #header ( )). Η ειδικότητα αυξάνεται όταν συνδυάζετε επιλογείς τάξης ή περιορίζετε τον επιλογέα σε ένα συγκεκριμένο στοιχείο.

Πρόσβαση σε μαθήματα με JavaScript

Μπορείτε να διαβάσετε και να χειριστείτε τις τάξεις ενός στοιχείου με classListJavaScript. Για παράδειγμα, η προσθήκη μιας τάξης θα μπορούσε να είναι:

document.getElementById('italicize').classList.add('italic');

Αυτό το demo δείχνει βασικά παραδείγματα classListχρήσης:

jQuery έχει επίσης μέθοδοι για την αλληλεπίδραση με τις κατηγορίες, συμπεριλαμβανομένων .addClass(), .removeClass(), .toggleClass(), και .hasClass().

Περισσότερες πληροφορίες

Διαβάστε την προδιαγραφή W3C για επιλογείς τάξεων.
Μάθετε περισσότερα για τα σημασιολογικά ονόματα τάξεων.
Μάθετε περισσότερα σχετικά με την ειδικότητα.
Μάθετε για τη διαφορά μεταξύ τάξεων και αναγνωριστικών.
Μάθετε για πολλούς επιλογείς τάξεων και συνδυασμούς επιλογής τάξης / αναγνωριστικού.
Μάθετε σχετικά με το API .classList.
Μάθετε για το χειρισμό τάξεων στο jQuery.