Ομαδοποίηση Επιλογέων CSS

Ομαδοποίηση επιλογέων

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

h2, p {color:gray;}

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

Μπορούν να συνορεύσουν μαζί πολλαπλά επιλογείς, χωρίς καμία περιορισμό.

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

body, h2, p, table, th, td, pre, strong, em {χρώμα:κίτρινο;}

Συμβουλή:Με τη διάθεση, οι δημιουργοί μπορούν να συμπιέσουν ορισμένους τύπους στυλ μαζί, ώστε να αποκτήσουν πιο απλό πίνακα στυλ.

Οι δύο παρακάτω κανόνες θα δώσουν το ίδιο αποτέλεσμα, αλλά είναι εμφανές ποιος είναι πιο εύκολος να γραφτεί:

/* no grouping */
h1 {χρώμα:μπλε;}
h2 {χρώμα:μπλε;}
h3 {χρώμα:μπλε;}
h4 {χρώμα:μπλε;}
h5 {χρώμα:μπλε;}
h6 {χρώμα:μπλε;}
/* grouping */
h1, h2, h3, h4, h5, h6 {χρώμα:μπλε;}

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

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

/* group 1 */
h1 {χρώμα:χρυσό;χρώμαπρόσκηνής:λευκό;}
h2 {χρώμα:χρυσό;χρώμαπρόσκηνής:κίτρινο;}
h3 {χρώμα:λευκό;χρώμαπρόσκηνής:κίτρινο;}
h4 {χρώμα:χρυσό;χρώμαπρόσκηνής:λευκό;}
b {χρώμα:κίτρινο;χρώμαπρόσκηνής:λευκό;}
/* group 2 */
h1, h2, h4 {χρώμα:χρυσό;}
h2, h3 {χρώμαπρόσκηνής:κίτρινο;}
h1, h4, b {χρώμαπρόσκηνής:λευκό;}
h3 {χρώμα:λευκό;}
b {χρώμα:κίτρινο;}
/* group 3 */
h1, h4 {χρώμα:χρυσό;χρώμαπρόσκηνής:λευκό;}
h2 {χρώμα:χρυσό;}
h3 {χρώμα:λευκό;}
h2, h3 {χρώμαπρόσκηνής:κίτρινο;}
b {χρώμα:κίτρινο;χρώμαπρόσκηνής:λευκό;}

δοκιμάστε προσωπικά:

Λάβετε υπόψη ότι στο group 3 χρησιμοποιήθηκε η ομαδοποίηση αναφορών. Στη συνέχεια θα σας παρουσιάσουμε την ομαδοποίηση αναφορών.

Επιλογέας παρωτίδας

Το CSS2 εισήγαγε έναν νέο απλό επιλογέα - τον επιλογέα παρωτίδας (universal selector), που εμφανίζεται ως αστέρι (*). Αυτός ο επιλογέας μπορεί να ταιριάζει με οποιοδήποτε στοιχείο, όπως ένα παρωτίδα.

Για παράδειγμα, οι παρακάτω κανόνες θα κάνουν κάθε στοιχείο του εγγράφου να είναι κόκκινο:

* {color:red;}

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

Αυτή η αναφορά είναι ίση με την ομαδοποίηση επιλογέων για όλους τους στοιχεία του εγγράφου. Χρησιμοποιώντας τον επιλογέα παρωτίδας, με μια κλήση (μόνο έναν αστέρι), μπορείτε να καθορίσετε την τιμή του color attribute για όλα τα στοιχεία του εγγράφου σε red.

Ομαδοποίηση αναφορών

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

Αν υποθέσουμε ότι θέλετε να έχουν όλοι οι στοιχεία h1 κόκκινη υποβάθμιση και να εμφανίζονται με κείμενο μπλε και το γραμματοσειρά Verdana 28 pixel, μπορείτε να γράψετε τα εξής στυλ:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

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

h1 {font: 28px Verdana; color: white; background: black;}

Αυτό έχει την ίδια επίδραση με τα προηγούμενα 3 στυλ.

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

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

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

Τι θα λέγατε, η ανάγνωση αυτής της μορφής είναι πιο ευανάγνωστη;

Αλλά, αν αγνοηθεί ο δεύτερος τελικός χαρακτήρας, ο χρήστης代理 θα εξηγήσει αυτό το στυλ ως εξής:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

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

Γιατί το background δεν είναι μια νόμιμη τιμή για το color, και επειδή μπορεί να καθοριστεί μόνο ένας λέκτης για το color, ο χρήστης代理 θα αγνοήσει πλήρως αυτή την αναφορά color (περιλαμβανομένου και του background: black). Ετσι, το τίτλος h1 θα εμφανιστεί μόνο σε μπλε, χωρίς κόκκινη υποβάθμιση, αλλά είναι πιο πιθανό να μην εμφανιστεί καν το μπλε h1. Αντίθετα, αυτές οι τίτλοι θα εμφανιστούν μόνο με την προεπιλεγμένη χρώση (συνήθως μαύρη), και δεν θα υπάρχει υποβάθμιση. Η αναφορά font: 28px Verdana λειτουργεί κανονικά, γιατί τελειώνει σωστά με έναν τελικό χαρακτήρα.

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

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

Ομαδοποίηση Επιλογέων και Δηλώσεων

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

Η παρακάτω ρύθμιση καθορίζει ένα σύνθετο στυλ για όλους τους τίτλους:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

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

Η παρακάτω ρύθμιση ορίζει το στυλ όλων των τίτλων με λευκή υποβάθμιση και γκρι κείμενο, με εσωτερική επίστροφη 10 pixel και γεμάτο περιθώριο 1 pixel, και η γραμματοσειρά του κειμένου είναι Verdana.