Πίνακας περιεχομένων:
Βίντεο: CSS Efecto - 03 PseudoClases @JoseCodFacilito 2024
Όταν σχεδιάζετε συγκεκριμένα στοιχεία με CSS, είναι χρήσιμο να απεικονίσετε τον κώδικα HTML ως οικογενειακό δέντρο με γονείς, παιδιά και αδέλφια. Στο επόμενο παράδειγμα κώδικα, το δέντρο αρχίζει με το στοιχείο
html
, το οποίο έχει δύο παιδιά
κεφάλαιο
και
σώμα
. Η κεφαλή
έχει ένα παιδικό στοιχείο που ονομάζεται
τίτλος
. Το
σώμα
έχει στοιχεία
h1
,
ul
και
p
ως παιδιά. Τέλος, το στοιχείο
ul
έχει στοιχεία
li
ως παιδιά και το στοιχείο
p
έχει στοιχεία
a
ως παιδιά.
Εικόνα 4-3: DOM
Parody Tech Λογαριασμοί Twitter
Βαρεμένο Elon Musk
Vinod Coleslaw
ebooks
Parody Non-Tech Λογαριασμοί Twitter
Modern Seinfeld
Lord_Voldemort7
Αυτός είναι ο τρόπος εμφάνισης του κώδικα στο πρόγραμμα περιήγησης .
Αυτή η έκδοση παρουσιάζει μια απεικόνιση του κώδικα χρησιμοποιώντας τη μεταφορά των δέντρων.
Εδώ, κάθε σχέση εμφανίζεται μία φορά. Για παράδειγμα, στον κώδικα υπάρχει ένα στοιχείο
a
μέσα σε κάθε ένα από τα τρία στοιχεία
li
και αυτή η εικόνα εμφανίζει το
ul
σχέση μία φορά.
Λογαριασμός Twitter Parody Tech και Non-Tech (HTML tree ή προβολή μοντέλου αντικειμένου εγγράφου).
Το βαρεμένο Elon Musk είναι παρωδία του Elon Musk, του ιδρυτή των PayPal, Tesla και SpaceX. Ο Vinod Coleslaw είναι μια παρωδία του Vinod Khosla, του συνιδρυτή της Sun Microsystems και του επιχειρηματικού κεφαλαίου. Horse ebooks είναι ένας spambot που έγινε ένα φαινόμενο του Διαδικτύου.
Επιλογέας παιδιού
Οι ετικέτες αγκύρωσης λογαριασμού Twitter Parody Non-Tech είναι άμεσα παιδιά των ετικετών παραγράφων. Αν θέλετε να σχεδιάσετε μόνο τους λογαριασμούς Parody Non-Tech Twitter, μπορείτε να χρησιμοποιήσετε τον παιδικό επιλογέα
,
, ο οποίος επιλέγει τα άμεσα παιδιά ενός συγκεκριμένου στοιχείου. Ένας επιλογέας παιδιών δημιουργείται με την πρώτη εισαγωγή του γονικού επιλογέα, έπειτα ενός σημείου μεγαλύτερο από το (>) και τέλος του παιδικού επιλογέα. Στο παρακάτω παράδειγμα, επιλέγονται οι ετικέτες άγκυρας που είναι άμεσα παιδιά των ετικετών παραγράφου και αυτοί οι υπερσυνδέσμοι έχουν στυλ με κόκκινο χρώμα γραμματοσειράς και χωρίς υπογράμμιση. Οι λογαριασμοί Twitter Parody Tech δεν έχουν σχεδιαστεί επειδή είναι παιδιά της ετικέτας στοιχείου λίστας. p> a {
χρώμα: κόκκινο;
διακόσμηση κειμένου: κανένας;
}
Ο επιλογέας παιδιών που χρησιμοποιείται για το στυλ των λογαριασμών Twitter Parody Non-Tech.
Εάν χρησιμοποιείτε μόνο τον επιλογέα
a εδώ, όλοι οι σύνδεσμοι στη σελίδα θα είναι στυλ αντί για απλή επιλογή.
Επιλογέας απογόνων
Οι ετικέτες αγκύρωσης λογαριασμού Twitter Parody Tech είναι απόγονοι ή βρίσκονται εντός της αόριστης λίστας. Εάν θέλετε να σχεδιάσετε μόνο τους λογαριασμούς Parody Tech Twitter, μπορείτε να χρησιμοποιήσετε τον επιλογέα
απόγονο
, ο οποίος επιλέγει όχι μόνο τα παιδιά ενός συγκεκριμένου στοιχείου αλλά όλα τα στοιχεία που είναι ενσωματωμένα στο καθορισμένο στοιχείο. Ένας επιλογέας απογόνων δημιουργείται από την πρώτη λίστα του γονικού επιλογέα, ενός χώρου και τέλος του επιλογέα απογόνου που θέλετε να στοχεύσετε. Στο ακόλουθο παράδειγμα, επιλέγονται οι ετικέτες αγκύρωσης που είναι απόγονοι της μη ταξινομημένης λίστας και αυτοί οι υπερσυνδέσμοι έχουν στυλ με μπλε χρώμα γραμματοσειράς και διαγράφονται. Οι λογαριασμοί των Parody Non-Tech Twitter δεν είναι σχεδιασμένοι επειδή δεν είναι απόγονοι μιας μη ταξινομημένης λίστας. ul a {
χρώμα: μπλε;
διακόσμηση κειμένου: γραμμή-μέσω?
}
Επιλογέας παιδιών που χρησιμοποιείται για το στυλ των λογαριασμών Twitter Parody Tech.
Ενδιαφέρεστε να σχεδιάσετε μόνο την πρώτη ετικέτα άγκυρας σε μια λίστα, όπως το λογαριασμό του Modern Seinfeld Twitter ή το δεύτερο στοιχείο λίστας, όπως ο λογαριασμός Twitter Vinod Coleslaw; Πηγαίνετε στο w3schools. com και διαβάστε περισσότερα για τους επιλογείς
και
nth-child
.
