CSS ID Selector Detailed

Οι επιλογείς ID επιτρέπουν να καθοριστεί ένας τύπος που είναι ανεξάρτητος από τα στοιχεία του εγγράφου.

Επιλογείς ID CSS

Σε ορισμένους τομείς, οι επιλογείς ID μοιάζουν με τους επιλογείς κλάσης, αλλά υπάρχουν και σημαντικές διαφορές.

Γραμματική

Πρώτα, ο επιλογέας ID έχει ένα # - ονομάζεται επίσης σκακιστικός αριθμός ή αριθμός βενζίνης.

Δείτε τις παρακάτω κανόνες:

*#intro {βαρύτητα γραμμής:bold;}

Ως και οι επιλογείς κλάσης, οι επιλογείς ID μπορούν να αγνοήσουν τον επιλογέα αγνοίας. Ο προηγούμενος παράδειγμα μπορεί να γραφτεί και ως:

#intro {font-weight:bold;}

Ο αντίκτυπος αυτού του επιλογέα θα είναι ο ίδιος.

Η δεύτερη διαφορά είναι ότι οι επιλογείς ID δεν αναφέρονται στη τιμή της ιδιότητας class, αλλά αδιαφιλονίκητα αναφέρονται στη τιμή της ιδιότητας id.

Παρακάτω είναι ένα παράδειγμα πραγματικού επιλογέα ID:

<p id="intro"<p>This is a paragraph of introduction.</p>

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

Επιλογείς κλάσης ή επιλογείς ID;

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

Διαφορά 1: μπορεί να χρησιμοποιηθεί μόνο μια φορά στο έγγραφο

Διαφορετικά από τις κλάσεις, στον κώδικα HTML, οι επιλογείς ID χρησιμοποιούνται μια φορά και μόνο μια φορά.

Διαφορά 2: δεν μπορεί να χρησιμοποιηθεί λίστα λέξεων ID

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

Διαφορά 3: τα ID μπορούν να περιέχουν περισσότερη σημασία

Όπως και οι κλάσεις, μπορεί να επιλεγεί ανεξάρτητα από το στοιχείο. Υπάρχουν περιπτώσεις όπου γνωρίζετε ότι θα εμφανιστεί ένα συγκεκριμένο ID τιμή στο έγγραφο, αλλά δεν γνωρίζετε το στοιχείο στο οποίο θα εμφανιστεί, οπότε θέλετε να δηλώσετε一个 ανεξάρτητος ID επιλογέα. Για παράδειγμα, μπορεί να γνωρίζετε ότι σε ένα δεδομένο έγγραφο θα υπάρχει ένα στοιχείο με τιμή ID mostImportant. Δεν γνωρίζετε αν αυτό το πιο σημαντικό πράγμα είναι ένα παραθέμα, μια φράση, ένα στοιχείο λίστας ή ένα υπόσχετο τίτλος. Όμως γνωρίζετε ότι κάθε έγγραφο θα έχει αυτό το πιο σημαντικό περιεχόμενο, που μπορεί να βρίσκεται σε οποιοδήποτε στοιχείο και μπορεί να εμφανίζεται μόνο μια φορά. Σε αυτή την περίπτωση, μπορείτε να γράψετε τις εξής κανόνες:

#mostImportant {χρώμα:red; φόντο:yellow;}

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

<h1 id="mostImportant">Αυτό είναι σημαντικό!
<em id="mostImportant">Αυτό είναι σημαντικό!
<ul> id="mostImportant"<ul>This is important!</ul>

Try it yourself:

Case Sensitivity

Please note that class selectors and ID selectors may be case-sensitive. This depends on the language of the document. HTML and XHTML define class and ID values as case-sensitive, so the case of class and ID values must match the corresponding values in the document.

Therefore, for the following CSS and HTML, the element will not become bold:

#intro {font-weight:bold;}
<p id="Intro"<p>This is a paragraph of introduction.</p>

Since the uppercase and lowercase letters of the letter i are different, the selector will not match the elements above.