hujung hadapan web
tutorial css
Apakah perbezaan antara: nth-child dan: nth-of-type dalam pemilih CSS?
Apakah perbezaan antara: nth-child dan: nth-of-type dalam pemilih CSS?
<p> Jika anda pernah cuba memilih unsur-unsur tertentu dalam CSS dan mendapati diri anda keliru antara :nth-child dan :nth-of-type , anda tidak bersendirian. Kedua-dua kelas pseudo ini kelihatan sama, tetapi mereka berkelakuan berbeza bergantung kepada struktur HTML anda. Mari pecahkannya.
Bagaimana :nth-child Works
<p> The :nth-child Selector mensasarkan elemen berdasarkan kedudukannya di antara semua adik-beradik , tanpa mengira jenis.
<p> Katakan anda mempunyai <ul></ul> dengan campuran <li> , <p></p> , dan mungkin juga <span></span> di dalam:<ul> <li> Perkara 1 </li> <p> Perenggan </p> <li> Item 2 </li> <li> Perkara 3 </li> </ul><p> Sekiranya anda menulis CSS ini:
li: nth-child (3) {
warna: merah;
}<p> Ia tidak akan menyasarkan ketiga <li> . Ia mencari anak ketiga ibu bapa ( <ul> ), iaitu <p> , dan kerana itu bukan <li> , tiada apa yang berlaku.<p> SO :nth-child :<ul><li> Adakah elemen ini adalah anak nth ibu bapanya?<li> Dan adakah jenis yang sama (nama tag) seperti yang ditentukan?<p> Pendek kata:<ul><li> li:nth-child(2) bermaksud "Pilih anak kedua hanya jika ia adalah <li> ." Apa :nth-of-type sebenarnya
<p> :nth-of-type , sebaliknya, penapis mengikut jenis terlebih dahulu, kemudian gunakan formula.<p> Menggunakan struktur HTML yang sama: li: nth-of-type (2) {
Warna: Biru;
}<p> Ini akan memilih kedua <li> dalam senarai - tidak kira di mana ia duduk di antara adik -beradiknya.
<p> Jadi ia berfungsi seperti ini:
-
<li> Cari semua
<li> elemen di dalam ibu bapa.
<li> Hitung hanya mereka.
<li> Sapukan nilai n untuk memilih yang anda mahukan.
Bila hendak menggunakan setiap satu
<p> Inilah panduan cepat untuk membantu anda memilih: <p> Gunakan:nth-child bila:
<ul>
<li> Anda mahu menyasarkan berdasarkan kedudukan , dan perkara -perkara penting.
<li> Anda pasti anak n adalah tag yang betul.
<li> Anda menggayakan susun atur yang konsisten seperti grid atau senarai bersih tanpa tag campuran.
<p> Gunakan :nth-of-type When:
<ul><li> Anda berurusan dengan kandungan campuran (seperti beberapa s dan <p></p> s).<li> Anda perlu menyasarkan elemen tertentu mengikut jenis , bukan hanya kedudukan.
<li> Anda menggunakan gaya seperti warna baris bergantian dalam jadual atau senarai.
<p> Beberapa contoh penggunaan dunia nyata:
<ul>
<li> tr:nth-of-type(even) -untuk baris meja zebra-stripe.
<li> p:nth-of-type(3) -untuk gaya perenggan ketiga secara berbeza.
<li> img:nth-child(4) -untuk mensasarkan anak keempat jika ia adalah imej.
Rekap cepat perbezaan utama
<p> Fikirkan dengan cara ini:
<ul>
<li> :nth-child(n) = Lihat kedudukan, kemudian periksa sama ada ia sepadan dengan jenis elemen.
<li> :nth-of-type(n) = Lihat hanya pada unsur-unsur jenis ini, kemudian mengira mereka dan pilih nth.
<p> Kedua -duanya mengambil formula seperti 2n 1 atau kata kunci seperti odd dan even , jadi apabila anda memahami bagaimana mereka mengira, anda boleh melakukan perkara yang kuat dengan kod minimum.
<p> Jadi, pada dasarnya, ia datang kepada apa yang anda hitung:
<ul>
<li> Jika ia adalah tentang di mana elemen duduk di antara segala yang lain, pergi dengan :nth-child .
<li> Jika ia adalah salah satu daripada ini , gunakan :nth-of-type .
<p> Dan ingat: Perubahan kecil dalam struktur HTML boleh membalikkan bagaimana pemilih ini berfungsi-sentiasa menyemak semula markup apabila perkara tidak berkelakuan seperti yang diharapkan.
<p> Pada dasarnya itu sahaja.
Atas ialah kandungan terperinci Apakah perbezaan antara: nth-child dan: nth-of-type dalam pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Cara Menggunakan Unit VW dan VH di CSS
Aug 07, 2025 pm 11:44 PM
Unit VW dan VH mencapai reka bentuk responsif dengan mengaitkan saiz elemen dengan lebar dan ketinggian viewport; 1VW adalah sama dengan 1% lebar viewport, dan 1VH adalah sama dengan 1% ketinggian viewport; biasanya digunakan di kawasan skrin penuh, fon responsif dan jarak elastik; 1. Gunakan 100VH atau lebih baik 100DVH di kawasan skrin penuh untuk mengelakkan pengaruh bar alamat pelayar mudah alih; 2. 3. Jarak elastik seperti lebar: 80VW, margin: 5vhauto, padding: 2VH3VW, boleh membuat susun atur yang boleh disesuaikan; Perhatikan keserasian peranti mudah alih, kebolehaksesan dan konflik kandungan lebar tetap, dan disyorkan untuk memberi keutamaan untuk menggunakan DVH terlebih dahulu;
Apakah harta nisbah aspek CSS dan bagaimana menggunakannya?
Aug 04, 2025 pm 04:38 PM
Theaspect-ratiocsspropertydefinesthewidth-to-heightratioofanelement, memastikan konsistenproportionsinresponedesedesigns.1.InisappliedDirectyToelementsLikeImages, Video, Orcontainersusingsyxsuchaspasect-ratio: 16/9.2.
Bagaimana cara menggunakan CSS: Kelas pseudo kosong?
Aug 05, 2025 am 09:48 AM
The: emptypseudo-classSelectSelementSwithnoChildrenorcontent, includingspacesorcomments, SoonlyTrulyEmptyElementsLikeMatchit; 1.itcanHideEptyContainersByusing: kosong {paparan: none;} TOCleanUplayouts;
Cara membuat garis menegak dengan CSS
Aug 11, 2025 pm 12:49 PM
Gunakan div dengan sempadan untuk membuat garis menegak dengan cepat, dan tentukan gaya dan ketinggian dengan menetapkan sempadan dan ketinggian; 2. Penggunaan :: Sebelum atau :: Selepas elemen pseudo untuk menambah garis menegak tanpa tag HTML tambahan, sesuai untuk pemisahan hiasan; 3. Dalam susun atur Flexbox, dengan menetapkan warna lebar dan latar belakang kelas pembahagi, pembahagi menegak adaptif antara bekas elastik dapat dicapai; 4. Dalam cssgrid, masukkan garis menegak sebagai lajur bebas (seperti lajur autowidth) ke dalam susun atur grid, yang sesuai untuk reka bentuk responsif; Kaedah yang paling sesuai harus dipilih mengikut susun atur khusus untuk memastikan strukturnya mudah dan mudah dijaga.
Cara menggunakan harta penapis di CSS
Aug 11, 2025 pm 05:29 PM
Thecssfilterpropertyallowsvisualeffectslebur, kecerahan, andgrayscaletobeapplieddirectlytoHtmlelements.1) usethesyntaxfilter: filter-function (nilai) toapplyeffect.2) combinemultipleFileSwithswithswith, E.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.
Apakah kelas pseudo CSS dan bagaimana menggunakannya?
Aug 06, 2025 pm 01:06 PM
CSS Pseudo-Class adalah kata kunci yang digunakan untuk menentukan keadaan khas elemen. Ia boleh menggunakan gaya secara dinamik berdasarkan interaksi pengguna atau lokasi dokumen; 1.:Hover dicetuskan apabila tetikus dilegakan, seperti butang: Hover mengubah warna butang; 2.:Focus berkuatkuasa apabila elemen mendapat tumpuan, meningkatkan kebolehcapaian bentuk; 3.:nth-Child () memilih unsur-unsur dengan kedudukan, menyokong ganjil, bahkan atau formula seperti 2n 1; 4.: Pertama-Anak dan: Kanak-kanak Last Pilih Elemen Anak Pertama dan Terakhir masing-masing; 5.:Not () tidak termasuk unsur -unsur yang sepadan dengan keadaan yang ditentukan; 6.:Visited dan: gaya set pautan berdasarkan status akses pautan, tetapi: dikunjungi adalah dihadkan oleh privasi.
Cara membuat sempadan bertitik di CSS
Aug 15, 2025 am 04:56 AM
Gunakan CSS untuk membuat sempadan bertitik, hanya tetapkan atribut sempadan untuk bertitik. Sebagai contoh, "Sempadan: 3PXDotted#000" boleh menambah sempadan titik hitam 3-pixel ke elemen. Dengan menyesuaikan lebar sempadan, saiz titik boleh diubah. Sempadan yang lebih luas menghasilkan mata yang lebih besar. Anda boleh menetapkan sempadan bertitik untuk sisi tertentu, seperti "Border-top: 2PxDotteded". Sempadan bertitik sesuai untuk elemen peringkat blok seperti div dan input. Mereka sering digunakan dalam keadaan fokus atau kawasan yang boleh diedit untuk meningkatkan kebolehcapaian. Perhatikan kontras warna. Pada masa yang sama, berbeza dengan gaya garis pendek Dashed, bertitik membentangkan bentuk titik bulat. Ciri ini digunakan secara meluas dalam semua pelayar arus perdana.
Cara Membuat Kesan Glassmorfisme Dengan CSS
Aug 22, 2025 am 07:54 AM
Untuk membuat kesan meniru kaca CSS, anda perlu menggunakan penapis latar belakang untuk mencapai latar belakang kabur, menetapkan latar belakang lut seperti RGBA (255,255,255,0.1), tambah sempadan halus dan bayang-bayang untuk meningkatkan rasa hierarki, dan pastikan terdapat kandungan visual yang cukup di belakang unsur-unsur; 1. Gunakan penapis latar belakang: blur (10px) untuk mengaburkan kandungan latar belakang; 2. Gunakan RGBA atau HSLA untuk menentukan latar belakang telus untuk mengawal tahap ketelusan; 3. Tambah 1PxSolidrgba (255,255,255,0.3) sempadan dan bayang-bayang kotak untuk meningkatkan tiga dimensi; 4. Pastikan bekas mempunyai latar belakang yang kaya seperti gambar atau tekstur untuk membentangkan kesan penembusan kabur; 5. Ia serasi dengan pelayar lama
