Panduan Definitif untuk CSS Pseudo-Classes
Sama ada anda seorang pemula atau pemaju CSS yang berpengalaman, anda mungkin pernah mendengarnya pseudo-classes. Kelas pseudo yang paling terkenal mungkin : berlegar, yang membolehkan kita menstrukturkan elemen ketika itu dalam keadaan hover, iaitu apabila peranti penunjuk, seperti tetikus, menunjuk kepadanya.
Berikutan konsep jawatan terdahulu kami pada margin: auto dan CSS Floats, kami melihat lebih mendalam melihat kelas pseudo dalam jawatan ini. Kita akan lihat benar-benar kelas pseudo-kelas, bagaimana mereka bekerja, bagaimana kita boleh mengkategorikan mereka, dan bagaimana mereka berbeza dari unsur-unsur pseudo.
Apa Pseudo-Kelas?
Kelas pseudo adalah kata kunci yang boleh kita tambahkan kepada pemilih CSS agar mentakrifkan keadaan khas daripada unsur HTML yang dimiliki. Kita boleh menambah kelas pseudo kepada pemilih CSS dengan menggunakan sintaks kolon : seperti ini: a: hover ...
Kelas CSS adalah atribut yang boleh kami tambahkan ke elemen HTML yang kami mahu menggunakan peraturan gaya yang sama untuk, seperti item menu atas atau tajuk widget sidebar. Dalam erti kata lain, kita boleh menggunakan kelas CSS untuk kumpulan atau pengelasan elemen HTML yang satu sama cara atau yang lain.
Kelas pseudo adalah serupa dengan mereka dalam erti kata bahawa mereka juga digunakan untuk menambah peraturan gaya kepada elemen yang berkongsi ciri yang sama.
Tetapi sementara kelas tulen adalah ditakrifkan pengguna dan boleh dilihat dalam kod sumber, contohnya The kerja kelas CSS biasa adalah untuk klasifikasi atau elemen kumpulan. Pemaju tahu bagaimana elemen mereka dikumpulkan: mereka boleh membentuk kelas seperti "item menu", "butang", "lakaran kecil", dan sebagainya untuk kumpulan, dan kemudian gaya gaya yang serupa. Pengelasan ini berdasarkan ciri-ciri elemen yang ada yang diberikan oleh pemaju sendiri. Misalnya, jika pemaju memutuskan untuk menggunakan Walau bagaimanapun elemen HTML ada ciri-ciri umum mereka sendiri berdasarkan kedudukan, kedudukan, alam dan interaksi mereka dengan halaman dan pengguna. Ini adalah ciri-ciri yang ada tidak biasanya ditandakan dalam kod HTML, tetapi kita boleh sasarkan mereka dengan kelas pseudo dalam CSS, sebagai contoh: Ini adalah jenis ciri yang biasanya disasarkan oleh kelas pseudo. Untuk memahami perbezaan antara kelas dan kelas pseudo-lebih baik, mari kita anggap kita menggunakan kelas Kita boleh gaya elemen terakhir kanak-kanak dengan CSS berikut: Tetapi apa yang berlaku apabila elemen terakhir berubah? Nah, kita perlu memindahkannya Kerumitan ini kelas pengemaskinian boleh ditinggalkan kepada ejen pengguna, sekurang-kurangnya untuk ciri-ciri yang lazim di kalangan unsur-unsur (dan menjadi elemen terakhir adalah seperti biasa kerana ia boleh mendapatkan). Mempunyai yang telah ditentukan sebelumnya Terdapat banyak jenis pseudo-kelas, semuanya memberikan kita cara untuk menyasarkan elemen berdasarkan ciri-ciri mereka yang tidak boleh diakses atau lebih rumit untuk diakses. Berikut adalah senarai kelas pseudo piawai di MDN. Kelas pseudo dinamik ditambah dan dikeluarkan daripada elemen HTML dinamik, berdasarkan keadaan mereka beralih ke sebagai tindak balas kepada interaksi pengguna. Beberapa contoh pseudo-kelas dinamik adalah Kelas pseudo berasaskan negeri ditambah kepada elemen apabila mereka berada dalam keadaan statik tertentu. Antara contoh yang paling terkenal ialah: Kelas pseudo kelas yang paling popular haruslah menjadi Kelas pseudo struktur mengklasifikasikan unsur berdasarkan pada kedudukan mereka dalam struktur dokumen. Contoh yang paling umum ialah Terdapat juga pelbagai pseudo-kelas yang sukar diklasifikasikan, seperti: Salah satu perkara paling sukar mengenai kelas pseudo mungkin untuk memahami perbezaan antara Kedua-duanya adalah pseudo-kelas struktur, dan tanda elemen tertentu di dalam elemen induk (bekas), tetapi dengan cara yang berbeza. Anggap n adalah 2, kemudian Mari lihat contoh. Mari lihat bagaimana gaya CSS pendek ini HTML dalam dua kes yang berbeza. Dalam Kes 1, elemen kedua di dalam a Tetapi jika elemen induknya tidak mempunyai perenggan kedua, yang Dalam contoh kami, Perenggan 1, Anak 1 Perenggan 2, Anak 3 Dalam kes kedua, kita memindahkan senarai yang tidak disusun ke tempat ketiga, dan perenggan kedua akan hadir di hadapannya. Ini bermakna kedua-dua Perenggan 1, Anak 1 Perenggan 2, Anak 2 Jika anda ingin membaca lebih lanjut tentang perbezaan di antara Apabila kita bercakap mengenai pseudo-kelas, ia juga penting untuk difahami bagaimana mereka berbeza daripada unsur-unsur pseudo, agar tidak mencampurkannya. Tetapi semasa kita menggunakan pseudo-classes untuk memilih elemen HTML itu wujud dalam pokok dokumen hanya tidak ditandai secara berasingan, unsur-unsur pseudo membolehkan kita mensasarkan unsur-unsur itu tidak selalunya wujud di DOM, sama ada sama sekali (mis Terdapat juga a perbezaan dalam sintaks. Unsur-unsur pseudo biasanya dikenalpasti dengan titik dua Ini boleh membawa kepada kekeliruan seperti dalam CSS2, unsur-unsur pseudo ditandai dengan satu kolon tunggal - pelayar masih menerima sintaks kolon tunggal untuk unsur-unsur pseudo. Terdapat juga perbezaan antara kelas pseudo dan unsur-unsur pseudo dalam cara kami boleh menargetkan mereka dengan CSS. Unsur-unsur pseudo hanya boleh muncul selepas urutan pemilih, sedangkan pseudo-kelas boleh diletakkan di mana-mana jujukan selektor CSS. Sebagai contoh, anda boleh menyasarkan item senarai terakhir elemen senarai seperti ATAU Urutan pertama pemilih memilih anak terakhir di dalam Mari kita cuba melakukan sesuatu yang serupa dengan unsur-unsur pseudo. Kod CSS di atas adalah sah, dan teks "merah" akan muncul selepas yang Kod ini di sisi lain, tidak akan berfungsi, seperti yang kita tidak dapat mengubah kedudukan elemen pseudo dalam urutan pemilih. Juga, hanya satu unsur pseudo boleh muncul di sebelah pemilih, sedangkan pseudo-kelas boleh digabungkan dengan satu sama lain jika kombinasi itu masuk akal. Contohnya, untuk menyasarkan elemen kanak-kanak pertama yang juga dibaca sahaja, kita boleh membuat gabungan kelas pseudo Kod pemilih dengan a Penting untuk mengetahui ini adalah tidak Pseudo-kelas CSS yang sedang disasarkan oleh jQuery. Mereka dipanggil sambungan seleksi jQuery. Pelanjutan seleksi jQuery membolehkan anda target elemen HTML dengan kata kunci yang lebih mudah. Kebanyakan mereka adalah gabungan beberapa pemilih CSS normal, yang diwakili dengan kata kunci tunggal.Tujuan Kelas Pseudo
.lepas untuk mengenal pasti elemen terakhir dalam bekas induk yang berbeza.
li.last text-transform: huruf besar; option.last font-style: italic;
.lepas kelas dari elemen terakhir yang terakhir kepada yang terkini.:anak bongsu pseudo-class memang sangat berguna. Dengan cara ini, kita tidak perlu menunjukkan unsur terakhir dalam kod HTML, tetapi kita masih boleh menyusunnya dengan CSS berikut: li: last-child text-transform: uppercase; pilihan: kanak-kanak lepas font-style: italic;
Jenis Utama Pseudo-Kelas
1. Pseudo-Kelas Dinamik
: berlegar, : fokus, : pautan, dan : dikunjungi, semua yang boleh ditambah kepada tag anchor. a: melawat color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Pseudo-Kelas Berasaskan Negeri
: diperiksa yang boleh digunakan untuk kotak pilihan ():skrin penuh untuk menyasarkan sebarang elemen yang sedang dipaparkan dalam mod skrin penuh: dilumpuhkan untuk elemen HTML yang boleh berada dalam mod kurang upaya, seperti , , dan . : diperiksa, yang bendera sama ada kotak semak ditandakan atau tidak. .kotak semak: disemak + label font-style: italic; input: disabled background-color: #EEEEEE;
3. Pseudo-Kelas Struktur
: anak pertama, :anak bongsu, dan : nth-child (n) - semua boleh digunakan untuk menyasarkan elemen kanak-kanak tertentu di dalam bekas mengikut kedudukannya - dan : akar yang mensasarkan elemen induk peringkat tertinggi di DOM. 4. Pelbagai Kelas Pseudo
: tidak (x) yang memilih elemen yang tidak sepadan dengan pemilih x: lang (bahasa-kod) yang memilih unsur kandungan mana dalam bahasa tertentu: dir (directionality) yang memilih elemen dengan kandungan petunjuk arah yang diberikan (kiri ke kanan atau kanan ke kiri). p: lang (ko) background-color: # FFFF00; : root background-color: # FAEBD7;
nth-child vs n jenis Pseudo-Classes
: nth-child dan : nth-of-type pseudo-classes.: nth-of-child (n) mensasarkan elemen yang adalah anak kedua elemen induknya, dan : nth-of-type (n) sasaran yang kedua di antara jenis yang sama unsur (seperti perenggan) dalam elemen induk. / * paragraf yang juga anak kedua di dalam elemen induknya * / p: nth-child (2) color: # 1E90FF; // lightblue / * perenggan kedua di dalam elemen induk * / p: nth-of-type (2) font-weight: bold;
Kes 1
nth-child (2) peraturan tidak akan terpakai kepadanya. Walaupun ia adalah anak kedua, ia adalah tidak satu perenggan. nth-of-type (2) peraturan akan dikenakan, kerana peraturan ini hanya mencari unsur-unsur, dan tidak peduli dengan yang lain jenis unsur (seperti senarai tanpa urutan) di dalam elemen induk.nth-of-type (2) Peraturan akan menyusun perenggan kedua iaitu Anak 3.
Senarai Tidak Disusun 1, Anak 2
Kes 2
: nth-child (2) dan juga : nth-of-type (2) peraturan akan digunakan, sebagai perenggan kedua juga anak kedua orang tuanya
Senarai Tidak Disusun 1, Anak 3
: nth-of-child dan : nth-of-type pseudo-classes, CSS Tricks mempunyai jawatan hebat di atasnya. Jika anda menggunakan SASS, Family.scss boleh membantu anda membuat rumit nth-child'elemen tersirat.Pseudo-Kelas vs Pseudo-Elements
Unsur-unsur pseudo, seperti :: sebelum ini dan :: selepas (lihat tutorial tentang cara menggunakannya) juga ditambah oleh ejen pengguna, dan mereka boleh disasarkan dan digayakan dengan CSS juga, seperti kelas pseudo. :: sebelum ini dan :: selepas) atau hanya sebagai bahagian tertentu elemen sedia ada (mis ::surat pertama atau :: placeholder). ::, manakala pseudo-kelas dikenalpasti dengan satu kolon :.1. Tempat mereka dalam urutan pemilih CSS
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.merah) dan yang kedua memilih anak terakhir di antara unsur-unsur yang memiliki .merah kelas dalam ul> .red :: after display: block; kandungan: 'merah'; warna: # B0171F;
barang dengan kelas .merah. ul> :: after.red display: block; kandungan: 'merah'; warna: # B0171F;
2. Bilangan Kejadian dalam Urutan Pemilih
: anak pertama dan :baca sahaja dengan cara berikut: : anak pertama: baca sahaja warna: #EEEEEE;
Sambungan Pemilih jQuery
: sintaks tidak selalu menjadi pseudo-class CSS yang sesuai. Jika anda pernah menggunakan jQuery, maka anda mungkin telah menggunakan banyak pemilihnya dengan : contohnya sintaks $ (': kotak pilihan), $ (': input') dan $ (': dipilih'). / * Tukar fon semua elemen HTML yang berkaitan input, seperti butang, pilih, dan input * / $ (": input") .css ("font-family", "courier new")
