: όχι () - CSS-Κόλπα

Anonim

Η :not()ιδιότητα στο CSS είναι ψευδοκλάση άρνησης και δέχεται έναν απλό επιλογέα ή μια λίστα επιλογών ως επιχείρημα. Ταιριάζει με ένα στοιχείο που δεν αντιπροσωπεύεται από το όρισμα. Το όρισμα που πέρασε ενδέχεται να μην περιέχει πρόσθετους επιλογείς ή ψευδοστοιχεία.

Η δυνατότητα χρήσης μιας λίστας επιλογών ως επιχείρημα θεωρείται πειραματική, αν και η υποστηριζόμενη υποστήριξη αυξάνεται κατά τη στιγμή αυτής της γραφής, συμπεριλαμβανομένων των Safari (από το 2015), Firefox (από τον Δεκέμβριο του 2020) και Chrome (από τον Ιανουάριο του 2021).

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

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

  • : 
    

      

    •

    Το CSS μας θα επέλεγε όλα

  • στοιχεία εκτός από αυτά με κλάση .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Θα μπορούσατε επίσης να κάνετε το ίδιο χρησιμοποιώντας ψευδοκλάσεις που θεωρούνται απλός επιλογέας.

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    Ωστόσο, εάν χρησιμοποιήσουμε έναν ψευδο επιλογέα στοιχείων ως επιχείρημά μας, δεν θα παράγει το αναμενόμενο αποτέλεσμα.

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    Πολύπλοκοι επιλογείς

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    Οπτικό παράδειγμα

    Οπτική αναπαράσταση των ποικίλων χρήσεων του :not()

    Ειδικότητα

    Η ιδιαιτερότητα της :not ψευδο-τάξης είναι η ιδιαιτερότητα του επιχειρήματός της. Η :not() ψευδο-τάξη δεν προσθέτει στην ειδικότητα του επιλογέα, σε αντίθεση με άλλες ψευδο-τάξεις.

    Οι διαπραγματεύσεις ενδέχεται να μην είναι ένθετες, οπότε :not(:not(… )) δεν επιτρέπεται ποτέ. Οι συγγραφείς θα πρέπει επίσης να σημειώσουν ότι επειδή τα ψευδο-στοιχεία δεν θεωρούνται απλοί επιλογείς, δεν είναι έγκυρα ως επιχείρημα :not(X). Να είστε προσεκτικοί όταν χρησιμοποιείτε επιλογείς χαρακτηριστικών, καθώς ορισμένοι δεν υποστηρίζονται ευρέως όπως άλλοι. Επιτρέπεται η αλυσίδα :not επιλογών με άλλους :notεπιλογείς.

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

    Η :not()ψευδοκλάση έχει ενημερωθεί στην προδιαγραφή επιπέδου 4 του CSS Selectors για να επιτραπεί μια λίστα ορισμάτων. Στο CSS Selectors Level 3, ήταν σε θέση να δεχτεί έναν απλό επιλογέα. Ως αποτέλεσμα, η υποστήριξη του προγράμματος περιήγησης διαιρείται λίγο ανάμεσα στα πρόχειρα επιπέδου 3 και επιπέδου 4.

    Απλοί επιλογείς

    ΙΕ Ακρη Firefox Χρώμιο Σαφάρι ΛΥΡΙΚΗ ΣΚΗΝΗ
    9+ Ολα Ολα Ολα 12.1+ Ολα
    Android Chrome Android Firefox Πρόγραμμα περιήγησης Android iOS Safari Opera Mobile
    Ολα Ολα Ολα Ολα Ολα

    Λίστα επιλογών

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

    Επιφάνεια εργασίας

    Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
    88 84 Οχι 88 9

    Κινητό / Tablet

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9.0-9.2

    Περισσότερες πληροφορίες

    • CSS Selectors Module Επίπεδο 3
    • CSS Selectors Level 4 προδιαγραφή