CSS Derived Selector

Δευτερογενείς επιλογείς

Με την καθορισμό στυλ με βάση τη σχέση του στοιχείου στη θέση του, μπορείτε να κάνετε τη σήμανση πιο καθαρή.

Στο CSS1, οι επιλογείς που εφαρμόζουν κανόνες με αυτόν τον τρόπο ονομάζονται επιλογείς上下context (contextual selectors), λόγω του ότι εξαρτώνται από τη σχέση上下context για την εφαρμογή ή αποφυγή κανόνων. Στο CSS2, αυτοί ονομάζονται δευτερογενείς επιλογείς, αλλά ανεξάρτητα από το όνομα, η δράση τους είναι η ίδια.

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

Για παράδειγμα, αν θέλετε να γίνει το στοιχείο strong στη λίστα σε κλίμακα αντί για το συνηθισμένο粗体字, μπορείτε να ορίσετε έναν δευτερογενή επιλογέα:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Παρακαλώ λάβετε υπόψη τη σχέση上下文 των κωδίκων σε μπλε που σημαίνονται με <strong>:

<p><strong>Είμαι σε粗体字， όχι σε κλίμακα, γιατί δεν είμαι στη λίστα, οπότε αυτός ο κανόνας δεν ισχύει για μένα</strong></p>
<ol>
<li><strong>Είμαι σε κλίμακα. Αυτό οφείλεται στο γεγονός ότι το στοιχείο strong βρίσκεται μέσα στο στοιχείο li.</strong></li>
<li>Είμαι με κανονικό γράμμα.</li>
</ol>

Στην παραπάνω παράδειγμα, μόνο τα στοιχεία li με τα στοιχεία strong σε ιλιόγραμμα, χωρίς να χρειάζεται να οριστεί ειδική κλάση ή id για τα στοιχεία strong, ο κώδικας είναι πιο απλός.

Let's see the following CSS rules again:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

Below is the HTML affected by it:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

Related Content

If you need to learn more about derived selectors, please read the following content in the advanced tutorial of CodeW3C.com: