: μόνο του τύπου - CSS-Κόλπα

Anonim

Ο :only-of-typeεπιλογέας ψευδο-κλάσης στο CSS αντιπροσωπεύει οποιοδήποτε στοιχείο που δεν έχει αδέλφια του δεδομένου τύπου.

p:only-of-type ( color: red; )

Εάν καμία ετικέτα δεν προηγείται του επιλογέα, θα ταιριάζει με οποιαδήποτε ετικέτα (π.χ. :only-of-type). Εάν προηγηθεί άλλος επιλογέας, θα ταιριάζει με βάση τον τύπο της ετικέτας που αντιστοιχεί στον επιλογέα. Για παράδειγμα, .example:only-of-typeθα συμπεριφέρεται σαν p:only-of-typeνα .exampleεφαρμόζεται σε ένα στοιχείο παραγράφου.

Απλό παράδειγμα

Μία λίστα περιέχει μόνο ένα στοιχείο λίστας. Μια άλλη λίστα περιέχει τρία στοιχεία λίστας. Μπορούμε να στοχεύσουμε το στοιχείο λίστας που είναι μόνο του :only-of-type.

Δείτε αυτό το στυλό!

Αν και ίσως αυτό δεν είναι το καλύτερο παράδειγμα, γιατί :only-childθα λειτουργούσε τόσο καλά εκεί, δεδομένου ότι τα στοιχεία λίστας είναι τα μόνα πιθανά παιδιά των λιστών. Αν χρησιμοποιούμε divs, θα μπορούσαμε να στοχεύσουμε μια παράγραφο μέσα σε ένα div αν είναι η μόνη παράγραφος, παρά το ότι υπάρχουν και άλλα στοιχεία εκεί.

Δείτε αυτό το στυλό!

Να σημειωθεί

Ως διασκεδαστικό μέρος, θα μπορούσατε να επιτύχετε την ίδια επιλογή όπως :only-of-typeμε :first-of-type:last-of-typeή :nth-of-type(1):nth-last-of-type(1). Αυτοί χρησιμοποιούν δύο αλυσοδεμένους επιλογείς, που σημαίνει ότι η ειδικότητα είναι διπλάσια από αυτήν :only-of-type.

Υποστήριξη προγράμματος περιήγησης

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
Οποιος Οποιος Οποιος Οποιος IE9 + Οποιος Οποιος