Εκπαιδευτικός Οδηγός για τον Επιλογέα του CSS

Επιλογείς CSS

Οι επιλογείς CSS χρησιμοποιούνται για "εύρεση" (ή επιλογή) των στοιχείων HTML που θέλετε να ρυθμίσετε στυλ.

Χρησιμοποιήστε τον δοκιμαστή επιλογέα CSS μας για να δείτε διαφορετικούς επιλογείς.

Απλοί επιλογείς CSS

Οι απλοί επιλογείς επιλέγουν στοιχεία με βάση το όνομα του στοιχείου, το id και την κλάση. Επιπλέον, υπάρχουν οι γενικοί επιλογείς (*)

Επιλογέας Παράδειγμα Περιγραφή παραδείγματος
στοιχείο p Επιλέγει κάθε στοιχείο <p>.
#id #firstname Επιλέγει το στοιχείο που έχει το id="firstname".
* * Επιλέγει κάθε στοιχείο.
.κλάση .intro Επιλέγει κάθε στοιχείο που έχει την κλάση "intro".

Επιλογέας ατρ.

Ο επιλογέας ατрибούτου επιλέγει τα στοιχεία HTML που έχουν δεδομένη ομάδα ατрибούτων.

Επιλογέας Παράδειγμα Περιγραφή παραδείγματος
[attribute] [target] Επιλέγει κάθε στοιχείο που έχει το attribute target.
[attribute=value] [target=_blank] Επιλέγει κάθε στοιχείο που έχει το attribute target="_blank".
[attribute~=value] [title~=flower] Επιλέγει κάθε στοιχείο που περιέχει τη λέξη "flower" στη τιμή του αtribute title.
[attribute|=value] [lang|=en] Επιλέγει κάθε στοιχείο που ξεκινά με το en στη τιμή του αtribute lang.
[attribute^=value] a[href^="https"] Επιλέγει κάθε στοιχείο <a> που ξεκινά με το https στη τιμή του αtribute href.
[attribute$=value] a[href$=".pdf"] Επιλέγει κάθε στοιχείο <a> που τελειώνει με το .pdf στη τιμή του αtribute src.
[attribute*=value] a[href*="codew3c"] Επιλέγει κάθε στοιχείο <a> που περιέχει το υποσύνολο "abc" στη τιμή του αtribute href.

CSS nested selector

Επιλογέας Παράδειγμα Περιγραφή παραδείγματος
& & Εφαρμογή στυλ στο στοιχείο σε περιβάλλον άλλου στοιχείου