A Look into Negation CSS3 (NOT) Pemilih
CSS mempunyai beberapa pemilih yang membolehkan anda memilih elemen dalam keadaan tertentu seperti : berlegar, : fokus, : aktif, dan lain-lain. Tetapi hari ini kita tidak akan menampung mereka yang dipilih. Kami akan melihat satu yang masih sedikit diketahui kaedah tetapi digunakan oleh kebanyakan pereka web - iaitu : tidak pemilih atau juga dikenali sebagai pemilih negation.
Apa yang dilakukannya?
Saya pasti bahawa : tidak nama itu sendiri telah menerangkan fungsinya, bahawa ia hanya akan memilih yang bertentangan dengan elemen atau keadaan yang ditentukan. Sebagai contoh:
Sintaks ini akan memilih mana-mana unsur selain p (paragraf).
: tidak (p) Walaupun contoh sintaks di bawah akan memilih div unsur yang tidak tidak mempunyai kelas abc
div: not (.abc) Baiklah, sekarang, mari kita cuba pemilih ini dalam contoh sebenar:
Pertama sekali, mari kita buat beberapa perenggan dengan beberapa pautan dari Wikipedia dan beberapa pautan dengan domain fiksyen. Berikut adalah markup HTML untuk perenggan ini.
CSS: bukan Pemilih Demo
Jujubes memohon wijen snaps chupa chups kek coklat. Oat kek marshmallow wypas toffee donut cake. Chupa chups jelly cupcake gummi bear. Lemon menjatuhkan wafer kek.
Kek coklat kek pastri jelly roll roll manis soufflà ??  ?? Ã' © kek coklat. Wypas gula-gula kapas lemon menjatuhkan gula-gula cookie bonbon bonbon marzipan. Macaroon liquorice jelly-o. Coklat gula-gula pai manis marshmallow dragà ??  ?? Ã' © e kapas candy brownie marshmallow.
Puding topping marshmallow bear cakar. Gula muffin pasta gmai kek coklat buah jelly gingerbread sesame snaps. Coklat gula-gula cupcake menanggung cakar. Muffin kek muffin gula-gula kapas tootsie roll muffin. Kacang jeli tart dragà ??  ?? Ã' © e icing manis wafer topping chocolate bar. Sweet roll sugar candy plum pastry dragà ??  ?? Ã' © e gula muffin bonbon.
Pastri pemakan kek marzipan buah-buahan wypas. Oat kek coklat wypas dragà ??  ?? Ã' © e gula plum kek lobak gula. Caramels coklat bar croissant wafer cupcake pie jujubes coklat bar. Biscuit candy canes dragà ??  ?? Ã' © e.Candy brownie oat cake sesame snaps cheesecake powder tootsie roll biscuit bear caw. Soufflà ??  ?? Ã' © gummi beruang kacang jelly sesame snaps faworki cookie pencuci mulut manis bonbon.
Rancangan di sini ialah: kami hanya akan memilih pautan yang tidak menunjuk pada Wikipedia dan kemudian memberi pautan tanda seru untuk memberi perhatian kepada pautan tersebut.
Pertama, kami akan menambah : selepas elemen pseudo pada semua pautan untuk meletakkan tanda, dan kami menentukannya sebagai blok sebaris elemen.
a: after display: block-inline;
Kemudian, untuk memilih setiap pautan yang tidak menunjuk pada Wikipedia, kami akan menggabungkannya : tidak pemilih dengan pemilih atribut. Pemilih atribut di sini akan memilih setiap tag anchor yang atribut href bermula dengan http://en.wikipedia.org/ dan dengan menggabungkannya dengan : tidak, ia jelas akan memilih sebaliknya. Jadi di sini kita pergi:
a: not ([href ^ = "http://en.wikipedia.org/"]): after background-color: # F8EEBD; sempadan: 1px pepejal # EEC56D; jejari sempadan: 3px 3px 3px 3px; warna: # B0811E; kandungan: "!"; saiz fon: 10pt; margin-left: 5px; padding: 1px 6px; kedudukan: relatif;
Ianya berfungsi! Tanda-tanda anchor yang tidak menunjukkan Wikipedia kini mempunyai tanda seru.
Bug Chrome
Jika anda melihatnya di Chrome, anda akan melihat kesan yang diberikan tidak seperti di atas. Semua pautan kelihatan mempunyai tanda seru tanpa mengira URL.
Kes ini sebenarnya telah dialamatkan sebagai pepijat. Jadi, untuk membetulkan pepijat ini, kita perlu menambah peraturan ini.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Dan sekarang masalah sepatutnya telah ditetapkan.
- Demo
Kesimpulannya
Dalam beberapa keadaan menggunakan : tidak pemilih benar-benar pilihan yang paling berkesan, seperti contoh di atas, di mana kita dapat memilih beberapa unsur rawak tanpa menambah kelas yang tidak diperlukan, atau markup tambahan pada dokumen.
Anda sebenarnya boleh terus membina kesan hebat dengan menggunakan pemilih ini, dan ini adalah satu contoh: Fungsi Fungsian dengan CSS3
