Τεχνικές εργασίας με DOM: γονέας, παιδί και παρακείμενα στοιχεία. Προσαρμοσμένοι επιλογείς στο CSS. Επιλογείς χαρακτηριστικών γείτονας, παιδιού, συμφραζομένων και ετικετών

3. Μία από τις πολλές τιμές χαρακτηριστικών

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

{
χρώμα: κόκκινο;
μέγεθος γραμματοσειράς:150%;
}
...

Το τηλέφωνό μας: 777-77-77

Η διευθυνση μας: Μόσχα οδός. Σοβέτσκαγια 5

Θα έχετε το εξής αποτέλεσμα:

Ο κανόνας ισχύει για ένα στοιχείο του οποίου οι τιμές χαρακτηριστικών περιλαμβάνουν: τάξηυπάρχει ένα νόημα τηλ.

4. Παύλα στην τιμή του χαρακτηριστικού

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

[χαρακτηριστικό|="τιμή"] ( στυλ )
Επιλογέας[ιδιότητα|="τιμή"] ( στυλ )

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

{
χρώμα: κόκκινο;
μέγεθος γραμματοσειράς:150%;
}
...

• Παράγραφος 1


• Σημείο 2


• Σημείο 3


• Σημείο 4

Αποτέλεσμα:

Στο παράδειγμα, ο κανόνας στυλ ισχύει μόνο για εκείνα τα στοιχεία λίστας των οποίων το όνομα κλάσης αρχίζει με τιμή "μενού-".

5. Η τιμή του χαρακτηριστικού ξεκινά με συγκεκριμένο κείμενο

Αυτός ο επιλογέας ορίζει το στυλ για ένα στοιχείο εάν η τιμή του χαρακτηριστικού ετικέτας ξεκινά με μια συγκεκριμένη τιμή. Μπορεί να υπάρχουν δύο επιλογές:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

ένα(
χρώμα:πράσινο;
font-weight:bold;
}
...

Αποτέλεσμα:

Το παράδειγμα δείχνει πώς να εμφανίζονται εξωτερικοί σύνδεσμοι και εσωτερικοί σύνδεσμοι διαφορετικά. Οι εξωτερικοί σύνδεσμοι ξεκινούν πάντα με τη συμβολοσειρά "http://". Επομένως, στον επιλογέα υποδεικνύουμε ότι το στυλ θα εφαρμοστεί μόνο σε συνδέσμους που έχουν το χαρακτηριστικό hrefξεκινά με νόημα http://.

6. Η τιμή του χαρακτηριστικού τελειώνει με συγκεκριμένο κείμενο

Συνδέει ένα στυλ σε στοιχεία των οποίων η τιμή χαρακτηριστικού τελειώνει με το καθορισμένο κείμενο. Έχει την εξής σύνταξη:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG (
περίγραμμα: 5 εικονοστοιχεία συμπαγές κόκκινο.
}
...

Εικόνα GIF

Μορφή εικόνας png

Αποτέλεσμα:

Στο παράδειγμα, όλες οι εικόνες με επέκταση gif θα εμφανίζονται με κόκκινο περίγραμμα πάχους πέντε pixel.

7. Η τιμή του χαρακτηριστικού περιέχει την καθορισμένη συμβολοσειρά

Αυτός ο επιλογέας δεσμεύει ένα στυλ σε ετικέτες των οποίων η τιμή χαρακτηριστικού περιέχει συγκεκριμένο κείμενο. Σύνταξη:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Στυλσυνδέεται με στοιχεία που έχουν Χαρακτηριστικόμε το καθορισμένο όνομα και η τιμή του περιέχει το καθορισμένο υποσυμβολοσειρά. Για παράδειγμα:

IMG (
περίγραμμα: 5 εικονοστοιχεία συμπαγές κόκκινο.
}
...

Εικόνα από το φάκελο της γκαλερί

Εικόνα από άλλο φάκελο

Αποτέλεσμα:

Στο παράδειγμα, το στυλ εφαρμόζεται σε εικόνες που φορτώνονται από το φάκελο "εκθεσιακός χώρος".

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

Επιλογέας[attribute1="value1"][attribute2="value2"] ( στυλ )

Επιπλέον, επιτρέψτε μου να σας υπενθυμίσω για ειδικούς επιλογείς CSS:

• χρησιμοποιώντας τα σύμβολα "+" και "~" σχηματίζονται.
• το σύμβολο ">" συνδέει τα στυλ css θυγατρικέςετικέτες?
• σύμβολο<пробел>δημιουργεί επιλογείς περιβάλλοντος.

Σε μελλοντικά άρθρα, θα εξετάσουμε επίσης ψευδο-στοιχεία και ψευδο-κλάσεις, τα οποία παρέχουν ισχυρά εργαλεία διαχείρισης στυλ.

Αυτό είναι όλο, τα λέμε ξανά.

Νομίζω ότι πολλοί γνωρίζουν επιλογείς περιβάλλοντος στο CSS. Χρησιμοποιούνται πιο συχνά, ωστόσο, οι έμπειροι σχεδιαστές διάταξης γνωρίζουν πολύ καλά ότι μερικές φορές οι επιλογείς με βάση τα συμφραζόμενα εισάγουν ορισμένα προβλήματα. Αυτό το πρόβλημα οφείλεται στο γεγονός ότι στη δομή ενός στοιχείου μπορεί να υπάρχουν πολλά πανομοιότυπα στοιχεία το ένα μέσα στο άλλο. Και πρέπει να εφαρμόσετε το στυλ όχι σε όλα τα ένθετα στοιχεία, αλλά μόνο στο στοιχείο του άμεσου παιδιού. Για αυτό χρησιμοποιούνται παιδικοί επιλογείς στο CSS.

Για να γίνει πιο ξεκάθαρο το πρόβλημα, ας δώσουμε ένα μικρό παράδειγμα. Μακάρι να έχουμε ένα τέτοιο Κώδικας HTML:

Και το καθήκον μας είναι να το κάνουμε κόκκινο μόνο» Δεύτερη παράγραφος". Αν γράψουμε χρησιμοποιώντας έναν επιλογέα περιβάλλοντος:

Δοχείο p (
χρώμα: κόκκινο;
}

Τότε και οι δύο παράγραφοι θα γίνουν κόκκινες, κάτι που δεν χρειαζόμαστε καθόλου. Αυτό το πρόβλημα μπορεί να λυθεί πολύ εύκολα χρησιμοποιώντας παιδικοί επιλογείς στο CSS:

Δοχείο > p (
χρώμα: κόκκινο;
}

Αυτό ήταν, τώρα έχουμε μόνο κόκκινο» Δεύτερη παράγραφοςΔεδομένου ότι η συγκεκριμένη παράγραφος είναι άμεσο τέκνο του .δοχείο. ΕΝΑ " Πρώτη παράγραφος«είναι παιδί της εσωτερικής div, επομένως, δεν επηρεάζεται από τον παιδικό επιλογέα.

Έτσι λύνονται εύκολα τέτοια προβλήματα, ωστόσο, υπάρχει ένα τεράστιο μειονέκτημα παιδικοί επιλογείς στο CSS- δεν λειτουργούν σε προγράμματα περιήγησης Internet Explorer. Για το λόγο αυτό, η χρήση τους είναι εξαιρετικά ανεπιθύμητη. Αν όμως το συναντήσετε ξαφνικά κάπου, τώρα θα ξέρετε τι σημαίνει και τι κάνει αυτός ο τύπος επιλογέα.

Πολύπλοκες και βαριές εφαρμογές web έχουν γίνει κοινές αυτές τις μέρες. Οι βιβλιοθήκες πολλαπλών προγραμμάτων περιήγησης και οι εύχρηστες βιβλιοθήκες όπως το jQuery με την πλούσια λειτουργικότητά τους μπορούν να βοηθήσουν σημαντικά στον χειρισμό του DOM εν κινήσει. Επομένως, δεν προκαλεί έκπληξη το γεγονός ότι πολλοί προγραμματιστές χρησιμοποιούν τέτοιες βιβλιοθήκες πιο συχνά από το να εργάζονται με το εγγενές DOM API, με το οποίο υπήρχαν πολλά προβλήματα. Ενώ οι διαφορές στο πρόγραμμα περιήγησης εξακολουθούν να αποτελούν πρόβλημα, το DOM είναι σε καλύτερη κατάσταση τώρα από ό,τι ήταν πριν από 5-6 χρόνια, όταν το jQuery κέρδιζε δημοτικότητα.

Σε αυτό το άρθρο, θα δείξω τις δυνατότητες χειρισμού HTML του DOM, εστιάζοντας στις σχέσεις γονέα, παιδιού και γείτονα. Εν κατακλείδι, θα δώσω πληροφορίες σχετικά με την υποστήριξη του προγράμματος περιήγησης για αυτές τις δυνατότητες, αλλά να έχετε κατά νου ότι μια βιβλιοθήκη όπως το jQuery εξακολουθεί να είναι μια καλή επιλογή λόγω της παρουσίας σφαλμάτων και ασυνεπειών στην υλοποίηση της εγγενούς λειτουργικότητας.

Καταμέτρηση παιδικών κόμβων

Θα χρησιμοποιήσω την ακόλουθη σήμανση HTML για αυτήν την επίδειξη και θα την αλλάξουμε μερικές φορές σε όλο το άρθρο:

• Παράδειγμα ένα
• Παράδειγμα δύο
• Παράδειγμα τρία
• Παράδειγμα τέσσερα
• Παράδειγμα πέντε
• Παράδειγμα έκτο

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Όπως μπορείτε να δείτε, τα αποτελέσματα είναι τα ίδια, αν και οι τεχνικές που χρησιμοποιούνται είναι διαφορετικές. Στην πρώτη περίπτωση χρησιμοποιώ την ιδιοκτησία των παιδιών. Αυτή είναι μια ιδιότητα μόνο για ανάγνωση και επιστρέφει τη συλλογή στοιχείων HTML που περιέχονται στο ζητούμενο στοιχείο. Για να μετρήσω τον αριθμό τους, χρησιμοποιώ την ιδιότητα length αυτής της συλλογής.

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

Θα μπορούσα να δοκιμάσω να χρησιμοποιήσω το childNodes.length (αντί για το child.length), αλλά κοιτάξτε το αποτέλεσμα:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

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

Έλεγχος ύπαρξης θυγατρικών κόμβων

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

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // αληθές

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

Και εδώ είναι το αποτέλεσμα της εκ νέου εκτέλεσης της hasChildNodes():

Console.log(myList.hasChildNodes()); // αληθές

Η μέθοδος εξακολουθεί να επιστρέφει true. Αν και η λίστα δεν περιέχει στοιχεία, περιέχει ένα κενό, το οποίο είναι έγκυρος τύπος κόμβου. Αυτή η μέθοδος λαμβάνει υπόψη όλους τους κόμβους, όχι μόνο τους κόμβους στοιχείων. Για να επιστρέψει το hasChildNodes() false, πρέπει να αλλάξουμε ξανά τη σήμανση:

Και τώρα το αναμενόμενο αποτέλεσμα εμφανίζεται στην κονσόλα:

Console.log(myList.hasChildNodes()); // ψευδής

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

Προσθήκη και αφαίρεση παιδικών στοιχείων

Υπάρχουν τεχνικές που μπορείτε να χρησιμοποιήσετε για να προσθέσετε και να αφαιρέσετε στοιχεία από το DOM. Το πιο διάσημο από αυτά βασίζεται σε έναν συνδυασμό των μεθόδων createElement() και appendChild().

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

Σε αυτή την περίπτωση δημιουργώ

χρησιμοποιώντας τη μέθοδο createElement() και στη συνέχεια προσθέτοντάς την στο body . Είναι πολύ απλό και μάλλον έχετε χρησιμοποιήσει αυτή την τεχνική στο παρελθόν.

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

• Παράδειγμα ένα
• Παράδειγμα δύο
• Παράδειγμα τρία
• Παράδειγμα τέσσερα
• Παράδειγμα πέντε
• Παράδειγμα έκτο

Παράδειγμα κειμένου

Μπορώ να αλλάξω τη θέση της λίστας με τον ακόλουθο κωδικό:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

Το τελικό DOM θα μοιάζει με αυτό:

Παράδειγμα κειμένου

• Παράδειγμα ένα
• Παράδειγμα δύο
• Παράδειγμα τρία
• Παράδειγμα τέσσερα
• Παράδειγμα πέντε
• Παράδειγμα έκτο

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

Μπορώ επίσης να αφαιρέσω εντελώς ένα θυγατρικό στοιχείο από το DOM χρησιμοποιώντας removeChild() . Δείτε πώς μπορείτε να διαγράψετε τη λίστα μας από το προηγούμενο παράδειγμα:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Το στοιχείο έχει πλέον αφαιρεθεί. Η μέθοδος removeChild() επιστρέφει το αφαιρεμένο στοιχείο, ώστε να μπορώ να το αποθηκεύσω σε περίπτωση που το χρειαστώ αργότερα.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Υπάρχει επίσης μια μέθοδος ChildNode.remove() που προστέθηκε σχετικά πρόσφατα στην προδιαγραφή:

Var myList = document.getElementById("myList"); myList.remove();

Αυτή η μέθοδος δεν επιστρέφει το απομακρυσμένο αντικείμενο και δεν λειτουργεί σε IE (μόνο Edge). Και οι δύο μέθοδοι αφαιρούν τους κόμβους κειμένου με τον ίδιο τρόπο όπως οι κόμβοι στοιχείων.

Αντικατάσταση παιδικών στοιχείων

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

Παράδειγμα κειμένου

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "παράδειγμα"; myDiv.appendChild(document.createTextNode("Κείμενο νέου στοιχείου")); document.body.replaceChild(myDiv, myPar);

Κείμενο νέου στοιχείου

Όπως μπορείτε να δείτε, η μέθοδος replaceChild() παίρνει δύο ορίσματα: το νέο στοιχείο και το παλιό στοιχείο που αντικαθιστά.

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

Παράδειγμα κειμένου 1

Παράδειγμα κειμένου 2

Παράδειγμα κειμένου 3

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

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Τώρα το DOM που δημιουργήθηκε μοιάζει με αυτό:

Παράδειγμα κειμένου 2

Παράδειγμα κειμένου 1

Επιλογή συγκεκριμένων παιδιών

Υπάρχουν πολλοί διαφορετικοί τρόποι για να επιλέξετε ένα συγκεκριμένο στοιχείο. Όπως φαίνεται νωρίτερα, μπορώ να ξεκινήσω χρησιμοποιώντας τη συλλογή παιδιών ή την ιδιότητα childNodes. Ας δούμε όμως και άλλες επιλογές:

Οι ιδιότητες firstElementChild και lastElementChild κάνουν ακριβώς αυτό που προτείνουν τα ονόματά τους: επιλέξτε το πρώτο και το τελευταίο θυγατρικό στοιχείο. Ας επιστρέψουμε στη σήμανση:

• Παράδειγμα ένα
• Παράδειγμα δύο
• Παράδειγμα τρία
• Παράδειγμα τέσσερα
• Παράδειγμα πέντε
• Παράδειγμα έκτο

Μπορώ να επιλέξω το πρώτο και το τελευταίο στοιχείο χρησιμοποιώντας αυτές τις ιδιότητες:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Παράδειγμα ένα" console.log(myList.lastElementChild.innerHTML); // "Παράδειγμα έξι"

Μπορώ επίσης να χρησιμοποιήσω τις ιδιότητες previousElementSibling και nextElementSibling εάν θέλω να επιλέξω θυγατρικά στοιχεία εκτός από το πρώτο ή το τελευταίο. Αυτό γίνεται συνδυάζοντας τις ιδιότητες firstElementChild και lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Παράδειγμα δύο" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Παράδειγμα πέντε"

Υπάρχουν επίσης παρόμοιες ιδιότητες firstChild , lastChild , previousSibling και nextSibling , αλλά λαμβάνουν υπόψη όλους τους τύπους κόμβων, όχι μόνο στοιχεία. Γενικά, οι ιδιότητες που λαμβάνουν υπόψη μόνο τους κόμβους στοιχείων είναι πιο χρήσιμες από αυτές που επιλέγουν όλους τους κόμβους.

Εισαγωγή περιεχομένου στο DOM

Έχω ήδη εξετάσει τρόπους εισαγωγής στοιχείων στο DOM. Ας προχωρήσουμε σε ένα παρόμοιο θέμα και ας ρίξουμε μια ματιά στις νέες δυνατότητες για την εισαγωγή περιεχομένου.

Πρώτον, υπάρχει μια απλή μέθοδος insertBefore(), όπως η replaceChild(), παίρνει δύο ορίσματα και λειτουργεί τόσο σε νέα στοιχεία όσο και σε υπάρχοντα. Εδώ είναι η σήμανση:

• Παράδειγμα ένα
• Παράδειγμα δύο
• Παράδειγμα τρία
• Παράδειγμα τέσσερα
• Παράδειγμα πέντε
• Παράδειγμα έκτο

Παράδειγμα Παράγραφος

Προσέξτε την παράγραφο που πρόκειται να αφαιρέσω πρώτα και στη συνέχεια να την εισαγάγετε πριν από τη λίστα, όλα με μια κίνηση:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

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

Παράδειγμα Παράγραφος

• Παράδειγμα ένα
• Παράδειγμα δύο
• Παράδειγμα τρία
• Παράδειγμα τέσσερα
• Παράδειγμα πέντε
• Παράδειγμα έκτο

Όπως και η replaceChild(), η insertBefore() παίρνει δύο ορίσματα: το στοιχείο που πρέπει να προστεθεί και το στοιχείο πριν από το οποίο θέλουμε να το εισαγάγουμε.

Αυτή η μέθοδος είναι απλή. Ας δοκιμάσουμε τώρα μια πιο ισχυρή μέθοδο εισαγωγής: τη μέθοδο insertAdjacentHTML().

Τα θυγατρικά στοιχεία είναι στοιχεία που βρίσκονται απευθείας μέσα σε ένα γονικό στοιχείο. Προσέξτε τις λέξεις: κατευθείαν μέσα.

Ας δούμε ένα παράδειγμα απλού κώδικα html:

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

Εδώ λιπαρόςΚαι υπογραμμισμένο και πλάγιοστοιχεία.

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

Τώρα ας προσθέσουμε στυλ CSS σε αυτόν τον κώδικα html χρησιμοποιώντας θυγατρικούς επιλογείς.

Σύνταξη για παιδιά επιλογείς:

Επιλογέας 1 > Επιλογέας 2 ( Ιδιότητα: τιμή; )

Εδώ είναι ο ενημερωμένος κώδικας:

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

Εδώ λιπαρόςΚαι υπογραμμισμένο και πλάγιοστοιχεία.

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

Και στο δεύτερο είναι φωλιασμένο σε μια ετικέτα , αν και είναι και παιδί της ετικέτας

Επομένως, στη δεύτερη παράγραφο, ο κανόνας CSS για τον παιδικό επιλογέα p>i ( χρώμα : μπλε ; ) δεν θα λειτουργήσει - το πλάγιο κείμενο της δεύτερης παραγράφου δεν θα εμφανίζεται με μπλε χρώμα.

Εικόνα 1. Παράδειγμα #1 στην εργασία.

Μετάβαση στο στοιχείο html η δεύτερη παράγραφος μπορεί να χρησιμοποιηθεί χρησιμοποιώντας τον κανόνα CSS: p>u>i ( χρώμα : μπλε ; ).

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

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

Εδώ λιπαρόςΚαι υπογραμμισμένο και πλάγιοστοιχεία.

Αυτό το στυλ θα λειτουργήσει και το πλάγιο κείμενο στη δεύτερη παράγραφο θα εμφανίζεται με κίτρινο χρώμα.

Εικόνα 2. Παράδειγμα Νο. 2 σε δράση.

Πιο περίπλοκο παράδειγμα

Έχουμε κώδικα html:

• Επεξεργασία
  • Ματαίωση
  • Τομή
  • αντίγραφο
  • Εισάγετε
• Γραμματοσειρά
  • Τολμηρός
  • Πλάγια γραφή
  • Υπογραμμισμένο
• Μέγεθος
  • Μικρό
  • Κανονικός
  • Μέση τιμή
  • Μεγάλο

Από προεπιλογή ερμηνεύεται ως εξής:

Πρόκληση: Χρησιμοποιώντας CSS, μετατρέψτε αυτήν τη λίστα σε οριζόντιο μενού.

Εικόνα 3. Στόχος της αλλαγής.

Ακολουθεί μια λύση σε αυτό το πρόβλημα χρησιμοποιώντας παιδικούς επιλογείς:

• Επεξεργασία
  • Ματαίωση
  • Τομή
  • αντίγραφο
  • Εισάγετε
• Γραμματοσειρά
  • Τολμηρός
  • Πλάγια γραφή
  • Υπογραμμισμένο
• Μέγεθος
  • Μικρό
  • Κανονικός
  • Μέση τιμή
  • Μεγάλο

Για καλύτερη κατανόηση αυτού του παραδείγματος, διαβάστε παρακάτω.

Οι θυγατρικοί επιλογείς CSS είναι επιλογείς που χρησιμοποιούνται για την εφαρμογή στυλ σε στοιχεία μόνο όταν είναι παιδιά άλλων (γονικών) στοιχείων. Όπως οι επιλογείς καταγωγής, οι θυγατρικοί επιλογείς είναι σύνθετοι και αποτελούνται από απλούς επιλογείς (τάξεις, αναγνωριστικά κ.λπ.).

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

<тег1> <тег2>... <тег3><тег4>...

Ένα στοιχείο λέγεται ότι είναι θυγατρικό ενός άλλου στοιχείου εάν βρίσκεται στο πρώτο επίπεδο φωλιάς μέσα σε αυτό. Στο παράδειγμά μας<тег2>Και<тег3>είναι κόρες<тег1>, ΕΝΑ<тег4>- αυτή είναι η κόρη μου<тег3> .

Οι παιδικοί επιλογείς αποτελούνται από δύο ή περισσότερους απλούς επιλογείς που χωρίζονται με ένα σύμβολο ">", όπου πρώτα καθορίζεται ο γονέας, μετά το παιδί του, μετά το παιδί αυτού του παιδιού κ.λπ. Δηλαδή, όπως και στους επιλογείς καταγωγής, καθορίζεται η διαδρομή μέσω του δέντρου εγγράφων. Τα στυλ θα εφαρμοστούν μόνο σε εκείνα τα στοιχεία των οποίων οι επιλογείς είναι τελευταίοι στη λίστα. Γενική σύνταξη:

επιλογέας 1 > επιλογέας 2 (

Οι θέσεις και στις δύο πλευρές της πινακίδας ">" μπορούν να τοποθετηθούν ή όχι, όπως επιθυμείτε.

Παράδειγμα χρήσης θυγατρικών επιλογέων CSS

Παράγραφος 1.

Παράγραφος 2.

Αποτέλεσμα στο πρόγραμμα περιήγησης

Παράγραφος 1.

Παράγραφος 2.

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

Ο Internet Explorer 6.0 δεν κατανοεί τους θυγατρικούς επιλογείς, επομένως εάν δημιουργείτε τον ιστότοπό σας έχοντας στο μυαλό σας αυτό το παλαιότερο πρόγραμμα περιήγησης - να το έχετε υπόψη σας.

Παιδικοί επιλογείς σε πίνακες HTML

Πολλοί αρχάριοι (και μερικές φορές όχι αρχάριοι) στη δημιουργία ιστοσελίδων αντιμετωπίζουν ορισμένα προβλήματα όταν χρησιμοποιούν θυγατρικούς επιλογείς σε πίνακες HTML. Για να καταλάβετε για τι πράγμα μιλάμε, ας δούμε ένα τόσο συνηθισμένο τραπέζι.

Κελί 1.1	Κελί 1.2
Κελί 2.1	Κελί 2.2

Και τώρα το ερώτημα. Τι θα κάνατε αν χρειαζόταν να χρησιμοποιήσετε θυγατρικούς επιλογείς για να μεταβείτε από μια ετικέτα στα κελιά; Αν αποφασίσετε να γράψετε έτσι, τότε είναι λάθος:

πίνακας > tr > td ( αξία περιουσίας; αξία περιουσίας; ...)

Μπορείτε να μαντέψετε γιατί είναι λάθος; Οχι? Το γεγονός είναι ότι ξεχάσατε ένα ακόμη στοιχείο - το οποίο, ακόμα κι αν δεν προσδιορίζεται ρητά, εξακολουθεί να υπάρχει αόρατα σε κάθε πίνακα HTML. Απλώς δεν έχει τις απαιτούμενες ετικέτες ανοίγματος και κλεισίματος, επομένως συχνά ξεχνιέται. Παρεμπιπτόντως, ναι, μέσα Εκμάθηση HTMLΔεν το περάσαμε, γιατί στην πραγματικότητα η ρητή υπόδειξή του σπάνια χρειάζεται. Λοιπόν, νομίζω ότι έχετε ήδη μαντέψει ποια θα είναι η σωστή καταχώρηση, αλλά θα σας δείξω πάντως.

πίνακας > tbody > tr > td ( αξία περιουσίας; αξία περιουσίας; ...)

Παρεμπιπτόντως, όχι μόνο οι πίνακες έχουν στοιχεία με προαιρετικές ετικέτες ανοίγματος, υπάρχουν και τέτοια στοιχεία. Απλώς, στην πράξη, τα "προβλήματα λήθης" προκύπτουν συχνότερα με τους πίνακες, γι 'αυτό επέστησα την προσοχή σας σε αυτό.

Εργασία για το σπίτι.

1. Ορίστε τη σελίδα σε μέγεθος γραμματοσειράς Arial 0,9em και λίγο φόντο.
2. Γράψτε πολλές επικεφαλίδες και παραγράφους στη σελίδα, αλλάξτε το μέγεθος και το χρώμα του κειμένου της επικεφαλίδας όπως σας ταιριάζει.
3. Βεβαιωθείτε ότι οι σύνδεσμοι απευθείας στις παραγράφους της σελίδας είναι μπλε χωρίς υπογράμμιση. Αλλά ταυτόχρονα, εάν οι σύνδεσμοι πλαισιώνονται επιπλέον με οποιαδήποτε ετικέτα, για παράδειγμα για πλάγιους χαρακτήρες, τότε θα πρέπει να εμφανίζονται με υπογράμμιση και με κόκκινο χρώμα. Για άλλη μια φορά, εφιστώ την προσοχή σας στο γεγονός ότι δεν χρειάζεται να προσδιορίσετε στυλ συνδέσμων με κάθε ετικέτα πλαισίωσης ξεχωριστά, κάντε την καθολική. Πως? Σκέψου το.
4. Δημιουργήστε ένα μικρό μενού στη δεξιά πλευρά της σελίδας και διορθώστε το, για αυτό θα χρειαστείτε μια ιδιότητα και μερικές ακόμη ιδιότητες που το συνοδεύουν, θα το καταλάβετε εκεί. Ταυτόχρονα, αφήστε το μενού όχι μόνο να παραμείνει στη θέση του μέσα στο παράθυρο του προγράμματος περιήγησης, αλλά και να μην εισχωρεί στο περιεχόμενο της σελίδας κατά την κύλιση.

Νομίζω ότι το τελευταίο σημείο του μαθήματος θα είναι το πιο δύσκολο για εσάς, αλλά μην προσπαθήσετε να βυθιστείτε πλήρως στο να κατακτήσετε αμέσως τη θέση. Απλώς κάντε την εργασία σας. Παρεμπιπτόντως, αυτό το στοιχείο δεν θα λειτουργήσει στον Internet Explorer 6.0, καθώς ο γέρος δεν καταλαβαίνει τη σταθερή τοποθέτηση.