Οι συνδυαστές επιλογέων CSS

Οι συνδυαστές επιλογέων CSS

Οι συνδυαστές είναι ένα μηχανισμό που εξηγεί τις σχέσεις μεταξύ των επιλογέων.

Οι επιλογείς CSS μπορούν να περιέχουν πολλαπλούς απλούς επιλογείς. Σε αυτούς τους απλούς επιλογείς, μπορούμε να περιέχουμε έναν συνδυαστή.

Στο CSS υπάρχουν τέσσερα διαφορετικά συνδυαστές:

  • Η επιλογέας απογόνου (χώρος)
  • Η επιλογέας υποστοχέα (>)
  • Η αδελφική επιλογέας (+)
  • Η γενική αδελφική επιλογέας (~)

Η επιλογέας απογόνου

Η επιλογέας απογόνου ταιριάζει σε όλα τα στοιχεία που ανήκουν στους απογόνους του καθορισμένου στοιχείου.

Η παρακάτω παράδειγμα επιλέγει όλους τους στοιχεία <p> εντός του στοιχείου <div>:

Παράδειγμα

div p {
  background-color: yellow;
}

Δοκιμάστε το個人τικά

Η επιλογέας υποστοχέα

Η επιλογέας υποστοχέα ταιριάζει σε όλα τα στοιχεία που ανήκουν στο υποστοχέα του καθορισμένου στοιχείου.

Η παρακάτω παράδειγμα επιλέγει όλα τα同级 στοιχεία <p> που ανήκουν στο στοιχείο <div>:

Παράδειγμα

div > p {
  background-color: yellow;
}

Δοκιμάστε το個人τικά

Η αδελφική επιλογέας

Η αδελφική επιλογέας ταιριάζει σε όλα τα同级 στοιχεία που είναι αμέσως μετά το καθορισμένο στοιχείο.

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

Η παρακάτω παράδειγμα επιλέγει όλους τους同级 στοιχεία <p> που ακολουθούν το στοιχείο <div>:

Παράδειγμα

div + p {
  background-color: yellow;
}

Δοκιμάστε το個人τικά

Η γενική αδελφική επιλογέας

Η γενική αδελφική επιλογέας ταιριάζει σε όλους τους同级 στοιχεία που ανήκουν στο καθορισμένο στοιχείο.

Η παρακάτω παράδειγμα επιλέγει όλους τους同级 στοιχεία <p> που ανήκουν στο στοιχείο <div>:

Παράδειγμα

div ~ p {
  background-color: yellow;
}

Δοκιμάστε το個人τικά

Όλοι οι συνδυασμοί επιλογέων CSS

Επιλογέας Παράδειγμα Παράδειγμα περιγραφής
element element div p Επιλέξτε όλους τους στοιχεία <p> εντός του στοιχείου <div>.
element>element div > p Επιλέξει κάθε στοιχείο <p> που έχει ως γονικό στοιχείο το στοιχείο <div>.
element+element div + p Επιλέξει κάθε στοιχείο <p> που ακολουθεί το στοιχείο <div>.
element1~element2 p ~ ul Επιλέξει κάθε <ul> στοιχείο που έχει το στοιχείο <p> μπροστά του.

Επεκτατική ανάγνωση

Εκπαιδευτικό βιβλίο:Επιλογέας απογόνων CSS

Εκπαιδευτικό βιβλίο:Επιλογέας υποκείμενου στοιχείου CSS

Εκπαιδευτικό βιβλίο:Επιλογέας συναδέλφου CSS