Μια ματιά στην επιλογή CSS3 Negation (NOT)
Το CSS διαθέτει ορισμένους επιλογείς που σας επιτρέπουν να επιλέξετε στοιχεία σε ορισμένες συνθήκες, όπως π.χ. :φτερουγίζω, :Συγκεντρώνω, :ενεργός, κλπ. Ωστόσο, σήμερα δεν θα καλύψουμε αυτούς τους επιλογείς. Θα εξετάσουμε ένα που είναι ακόμα λίγο γνωστή μέθοδος αλλά χρησιμοποιείται από τους περισσότερους σχεδιαστές ιστοσελίδων - αυτό είναι το :δεν επιλογέα ή επίσης γνωστός ως επιλογέας άρνησης.
Τι κάνει?
Είμαι βέβαιος ότι το :δεν το ίδιο το όνομα έχει ήδη περιγράψει τη λειτουργία του, ότι θα επιλέξει απλά το αντίθετο από το καθορισμένο στοιχείο ή κατάσταση. Για παράδειγμα:
Αυτή η σύνταξη θα επιλέξει οποιοδήποτε στοιχείο εκτός από Π (παράγραφος).
: όχι (p) Ενώ η παρακάτω σύνταξη παραδείγματος θα επιλέξει το div στοιχείο που κάνει δεν έχουν τάξη αλφάβητο
div: όχι (.abc) Εντάξει, τώρα, ας δοκιμάσουμε αυτόν τον επιλογέα σε ένα πραγματικό παράδειγμα:
Πρώτα απ 'όλα, ας κάνουμε μερικές παραγράφους με λίγους συνδέσμους από τη Wikipedia και λίγες συνδέσεις με φανταστικούς τομείς. Εδώ είναι το σημάδι HTML για την παράγραφο.
Το CSS: όχι το Demo Selector
Jujubes applicake σουσάμι τσακίζει chupa chups σοκολατένιο κέικ. Βούτυρο κέικ ντομάτα. Chupa Chups ζελέ cupcake gummi φέρει. Το λεμόνι ρίχνει το γκοφρέτα.
Τυρόπιτα κέικ σοκολάτας ζελέ γλυκό ρολό σε σκόνη soufflà ??  ?? Ã' © κέικ σοκολάτας. Wypas βαμβάκι καραμέλα λεμόνι σταγόνες μπισκότο καραμέλα ντόνατ μούρο μαρσιπάν. Ζαχαροπλαστική καραμέλα μαρούλι ζελέ-o. Σοκολάτα πίτα γλυκό ρολό καραμέλα marshmallow dragà ¢  ¢ à¢ à ¢ â € šÂ¬ÃƒÆ'à ¢ â, ¬ Å ¡Ãƒâ € SA,.
Πουτίγκα κορυφή marshmallow φέρει νύχι. Πάστα καραμελών ζαχαροπλαστικής φρυγανιά ζελέ ψιλοκομμένο σουσάμι. Ζαχαροπλαστική καραμέλα φέρει νύχι. Καρότο κέικ muffin βαμβάκι καραμέλα tootsie ρολό muffin. Ζελέ φασόλια tart dragà ¯ ÃÆ'à ¢ â, ¬ Å ¡Ãƒâ € šÃ ¢ â, ¬? επικάλυψη σοκολάτας. Γλυκό ρολό ζαχαροπλαστικής ζαχαροκάλαμο ζαχαροπλαστικής dragà ?? Â? Ã' © e καραμέλα καραμέλα.
Ζαχαροπλαστική με ζαχαροκάλαμο wypas fruitcake. Βρώμη σοκολάτας κέικ σοκολάτας dragà ¯ ÃÆ'à ¢ â, ¬ Å ¡Ãƒâ € šÃƒÆ'à † â € ™ Ã⠀ SA, Καραμέλες σοκολάτα μπαρ κρουασάν μπισκότα κοκτέιλ πίτα jujubes μπαρ σοκολάτας. Μπισκότα καραμέλα ζαχαροπλαστικής dragà ?? Â? Ã' © e.Candy μπισκότο βούτυρο σουσάμι σπάει cheesecake σκόνη tootsie ρολό μπισκότο φέρει νύχι. Το σουφλάβιμς φέρει ζελέ φασόλια σουσάμι σκουπίζει faworki γλυκό γλυκό γλυκό μπισκότο.
Το σχέδιο είναι εδώ: θα επιλέξουμε μόνο τους συνδέσμους που δεν δείχνουν προς τη Wikipedia και στη συνέχεια θα δώσουμε αυτούς τους συνδέσμους ένα θαυμαστικό για να προειδοποιήσουμε την προσοχή προς αυτούς τους συνδέσμους.
Πρώτον, θα προσθέσουμε ένα :μετά ψευδο-στοιχείο σε όλους τους συνδέσμους για να τοποθετήσουμε το σήμα, και το ορίζουμε ως ένα inline-block στοιχείο.
α: μετά από εμφάνιση: inline-block;
Στη συνέχεια, για να επιλέξετε κάθε σύνδεσμο που δεν οδηγεί στην Wikipedia, θα συνδυάσουμε το :δεν επιλογέα με έναν επιλογέα χαρακτηριστικών. Ο επιλογέας χαρακτηριστικών εδώ θα επιλέξει κάθε ετικέτα αγκύρωσης στην οποία αρχίζει το χαρακτηριστικό href http://en.wikipedia.org/ και συνδυάζοντάς το με το :δεν, θα επιλέξει προφανώς το αντίθετο. Τόσο εδώ:
α: όχι ([href ^ = "http://en.wikipedia.org/"]): μετά από χρώμα-φόντου: # F8EEBD; σύνορα: 1px στερεά # EEC56D; ακτίνα-ακτίνα: 3px 3px 3px 3px; χρώμα: # B0811E; περιεχόμενο: "!"; μέγεθος γραμματοσειράς: 10pt; περιθώριο-αριστερά: 5px; padding: 1px 6px; θέση: σχετική.
Δουλεύει! Οι ετικέτες άγκυρας που δεν οδηγούν στη Wikipedia τώρα έχουν ένα θαυμαστικό.
Chrome Bug
Αν το δείτε αυτό στο Chrome, θα παρατηρήσετε ότι το αποτέλεσμα της επίδρασης δεν είναι το πιο πάνω. Όλοι οι σύνδεσμοι φαίνεται να έχουν ένα θαυμαστικό ανεξάρτητα από τη διεύθυνση URL.
Αυτή η υπόθεση αντιμετωπίστηκε ως σφάλμα. Για να διορθώσουμε αυτό το σφάλμα, πρέπει να προσθέσουμε αυτόν τον κανόνα.
ένα [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / εμφάνιση: inline-block;
Και τώρα το πρόβλημα θα έπρεπε να έχει διορθωθεί.
- Διαδήλωση
συμπέρασμα
Σε ορισμένες περιπτώσεις, χρησιμοποιώντας το :δεν ο επιλογέας είναι πραγματικά η πιο αποτελεσματική επιλογή, όπως ακριβώς και το παραπάνω παράδειγμα, όπου μπορούμε να επιλέξουμε μερικά τυχαία στοιχεία χωρίς να προσθέσουμε ακόμη και περιττή τάξη ή πρόσθετη σήμανση στο έγγραφο.
Μπορείτε να δημιουργήσετε πραγματικά μεγάλα εφέ χρησιμοποιώντας αυτό το επιλογέα και αυτό είναι ένα παράδειγμα: Λειτουργικότητα φίλτρου με CSS3
