Home-theater-designers
Όπως όλοι οι επιλογείς CSS, μπορείτε να χρησιμοποιήσετε το :nth-child() για να αναγνωρίσετε στοιχεία σε μια ιστοσελίδα και να εφαρμόσετε στυλ σε αυτά. Αλλά αυτός ο επιλογέας σάς επιτρέπει να περιορίσετε ένα σύνολο αδερφών με βάση τη σχετική θέση τους.
MUO Το βίντεο της ημέρας ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ
Ο επιλογέας υποστηρίζει ορισμένες βασικές λέξεις-κλειδιά για συνηθισμένες περιπτώσεις, αλλά παρέχει επίσης μια ισχυρή σύνταξη αντιστοίχισης προτύπων. Χρησιμοποιώντας το, μπορείτε να επιλέξετε στοιχεία με βάση τακτικά, επαναλαμβανόμενα μοτίβα ή πιο σύνθετους ορισμούς, με βάση τις ανάγκες σας.
Η σύνταξη του επιλογέα :nth-child().
Σαν Επιλογέας ψευδο-κλάσης CSS , η σύνταξη :nth-child() διαφέρει από άλλους επιλογείς. Λαμβάνει ένα όρισμα ως πρότυπο για την αντιστοίχιση στοιχείων σε ένα σύνολο αδελφών:
:nth-child(args) {
/*...*/
}
Η κύρια εστίαση είναι στα επιχειρήματα στις παρενθέσεις. Αυτά τα ορίσματα ορίζουν το υποσύνολο των στοιχείων προς επιλογή.
Χρήση τιμών λέξεων-κλειδιών για κοινές περιπτώσεις
Αυτός ο επιλογέας μπορεί να φιλοξενήσει δύο τιμές λέξεων-κλειδιών: Περιττός και ακόμη και . Είναι ιδιαίτερα χρήσιμα για styling εναλλακτικές σειρές σε έναν πίνακα .
Μια απλή ταξινομημένη λίστα είναι ένα άλλο καλό παράδειγμα για το πότε μπορείτε να χρησιμοποιήσετε αυτές τις τιμές λέξεων-κλειδιών:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Χρησιμοποιώντας την :nth-child(περίον) επιλογέα, μπορείτε να αλλάξετε το χρώμα κάθε εναλλακτικού στοιχείου:
:nth-child(odd) {
color: red;
}
Τα στοιχεία ξεκινούν από το ευρετήριο 1, οπότε το πρώτο στοιχείο θα εμφανίζεται κόκκινο, μετά το τρίτο και ούτω καθεξής:
πώς να συνδυάσετε δύο φωτογραφίες σε μία στο iphone
Λειτουργική σημείωση για περισσότερη ευελιξία
Μπορείτε να χρησιμοποιήσετε έναν μόνο ακέραιο για να επιλέξετε ένα μεμονωμένο στοιχείο, όπως αυτό:
li:nth-child(4) {
color: red;
}
Σε αυτήν την περίπτωση, ο επιλογέας ταιριάζει μόνο με το τέταρτο στοιχείο στη λίστα:
Αυτή η σύνταξη είναι μια ειδική περίπτωση της γενικότερης λειτουργικής σύνταξης που επιλέγει στοιχεία που ταιριάζουν με ένα δεδομένο μοτίβο. Αυτή η σύνταξη είναι:
:nth-child(An+B) {
/*...*/
}
Σε αυτή τη σημειογραφία, ΕΝΑ είναι το μέγεθος του βήματος. Αυτό σημαίνει πόσες φορές μετακινείται ο επιλογέας για να επιλέξει το επόμενο στοιχείο. Σας επιτρέπει να επιλέξετε κάθε άλλο στοιχείο, κάθε τρίτο στοιχείο κ.λπ. σι είναι το σημείο εκκίνησης όπου ξεκινά η επιλογή.
Για παράδειγμα, πάρτε το όρισμα 3n+1:
li:nth-child(3n+1) {
color: red;
}
Αυτό θα ξεκινήσει την επιλογή από το πρώτο στοιχείο και θα συνεχίσει με κάθε τρίτο στοιχείο μετά από αυτό:
Συγκρίνετε αυτό με την έκφραση 3n+2:
li:nth-child(3n+2) {
color:red;
}
Αυτό εξακολουθεί να επιλέγει κάθε τρίτο στοιχείο, αλλά τώρα ξεκινά από το δεύτερο στοιχείο στη λίστα:
Ένα άλλο ενδιαφέρον παράδειγμα είναι το :nth-child(n+3):
li:nth-child(n+3) {
color: red;
}
Αυτό θα επιλέξει κάθε στοιχείο (n), ξεκινώντας από το τρίτο (+3). Θα μοιάζει με αυτό:
Μπορείτε επίσης να χρησιμοποιήσετε την αφαίρεση για να επιτύχετε ορισμένα αποτελέσματα:
li:nth-child(3n-1) {
color: red;
}
Αυτό το παράδειγμα εξακολουθεί να επιλέγει κάθε τρίτο στοιχείο, αλλά ξεκινά από το 'πρώτο μείον'. Στην πραγματικότητα, αυτό σημαίνει ότι θα επιλέξει το δεύτερο στοιχείο στη λίστα, μετά το πέμπτο και ούτω καθεξής:
Η Σύνταξη του <επιλογέα>
Μπορείτε επίσης να χρησιμοποιήσετε τη λέξη-κλειδί του ακολουθούμενο από α εκλέκτορας ως όρισμα στον επιλογέα :nth-child(). Αυτή η σύνταξη σάς επιτρέπει να περιορίσετε τα πιθανά στοιχεία από τα οποία επιλέγει το κανονικό μοτίβο.
Για παράδειγμα, φανταστείτε ότι η σήμανση είναι πιο περίπλοκη από την αρχική:
<ol>
<li class="old">Item 1</li>
<li class="new">Item 2</li>
<li class="new">Item 3</li>
<li class="old">Item 4</li>
<li class="new">Item 5</li>
<li class="new">Item 6</li>
<li class="new">Item 7</li>
</ol>
Τώρα, χρησιμοποιήστε το :nth-child για να επιλέξετε τα ζυγά στοιχεία από το σύνολο αυτών με μια συγκεκριμένη κατηγορία:
.new {
font-weight: bold;
}
li:nth-child(even of.new) {
color: red;
}
Παρατηρήστε πώς μόνο τα έντονα στοιχεία με ζυγούς αριθμούς είναι κόκκινα:
Εξετάστε επίσης πώς αυτό διαφέρει από li.new:nth-child(ακόμη) που στοχεύει .νέα στοιχεία, αλλά μόνο αν είναι άρτια. Αυτά θα ήταν τα στοιχεία 2 και 6 στο παραπάνω παράδειγμα.
Εργασία με τον επιλογέα :nth-child().
Μπορείτε να επιτύχετε μοναδικά σχέδια χρησιμοποιώντας τον επιλογέα :nth-child(). Μπορείτε να δημιουργήσετε πολύχρωμους ιστότοπους και να επισημάνετε σειρές και στήλες σε πίνακες δεδομένων. Ο συνδυασμός του με άλλους επιλογείς CSS θα σας βοηθήσει να δημιουργήσετε πολύπλοκες διατάξεις και σχέδια.
πώς να βλέπετε ζώα σε τρισδιάστατη μορφή στο google