Bagaimana anda menggunakan: nth-child () dan: nth-of-type () pseudo-classes?

Bagaimana anda menggunakan: nth-child () dan: nth-of-type () pseudo-classes?

The :nth-child() dan :nth-of-type() pseudo-classes dalam CSS digunakan untuk memilih unsur-unsur berdasarkan kedudukan mereka dalam bekas induk. Inilah pandangan terperinci tentang cara menggunakan setiap:

Menggunakan: nth-anak ()

The :nth-child() pseudo-class memilih unsur-unsur berdasarkan kedudukan mereka di antara semua adik-beradik dalam ibu bapa yang sama, tanpa mengira jenis mereka. Sintaks adalah:

 <code class="css">:nth-child(an b)</code>

Di mana a dan b adalah bilangan bulat, dan n adalah kaunter bermula dari 0. Corak umum termasuk:

<li> :nth-child(2) : Memilih elemen anak kedua. <li> :nth-child(odd) : Memilih semua elemen kanak-kanak yang ganjil. <li> :nth-child(even) : Memilih semua elemen kanak-kanak yang bernombor. <li> :nth-child(3n) : Memilih setiap elemen kanak-kanak ketiga (3, 6, 9, dan lain-lain). <li> :nth-child(3n 1) : Memilih setiap elemen anak ketiga bermula dari yang pertama (1, 4, 7, dan lain-lain).

Contoh Penggunaan:

 <code class="html"><ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul></code>

 <code class="css">li:nth-child(2) { background-color: yellow; }</code>

Ini akan menggunakan latar belakang kuning ke elemen kedua <li> .

Menggunakan: nth-of-type ()

The :nth-of-type() pseudo-class adalah serupa, tetapi ia hanya memilih unsur-unsur berdasarkan kedudukan mereka di kalangan adik-beradik jenis yang sama. Sintaks adalah sama dengan :nth-child() :

 <code class="css">:nth-of-type(an b)</code>

Contoh Penggunaan:

 <code class="html"><ul> <li>First item</li> <p>Some text</p> <li>Second item</li> <p>More text</p> </ul></code>

 <code class="css">li:nth-of-type(2) { background-color: yellow; }</code>

Ini akan menggunakan latar belakang kuning ke elemen kedua <li> , tetapi tidak akan menjejaskan elemen <p></p> .

Apakah perbezaan utama antara: nth-child () dan: nth-of-type () dalam CSS?

Perbezaan utama antara :nth-child() dan :nth-of-type() adalah:

<li>

Pertimbangan Jenis Unsur:

<li> :nth-child() mengira semua elemen kanak-kanak tanpa mengira jenis mereka. Ia menganggap kedudukan elemen di kalangan semua adik beradik. <li> :nth-of-type() hanya mengira adik-beradik jenis elemen yang sama. Ia lebih spesifik dalam pemilihannya.
<li>

Ketepatan pemilih:

<li> :nth-child() kurang tepat jika anda menargetkan jenis elemen tertentu kerana ia mengira semua elemen. <li> :nth-of-type() membolehkan anda menargetkan elemen lebih tepat mengikut jenis, yang boleh menjadi lebih efisien dalam senario tertentu.
<li>

Senario penggunaan:

<li> Gunakan :nth-child() apabila anda perlu memilih elemen berdasarkan kedudukan mereka di antara semua adik-beradik, tanpa mengira jenis. <li> Penggunaan :nth-of-type() apabila anda ingin memilih elemen berdasarkan kedudukan mereka di kalangan adik-beradik jenis yang sama.

Bolehkah anda memberikan contoh bila digunakan: nth-child () versus: nth-of-type () dalam pembangunan web?

Menggunakan: Nth-Child () Contoh:

Katakan anda mempunyai susun atur grid pelbagai jenis elemen, dan anda ingin gaya setiap item ketiga tanpa mengira jenis elemen:

 <code class="html"><div class="grid"> <div>Item 1</div> <p>Item 2</p> <span>Item 3</span> <div>Item 4</div> <p>Item 5</p> <span>Item 6</span> </div></code>

 <code class="css">.grid :nth-child(3n) { background-color: lightblue; }</code>

Dalam kes ini,: :nth-child(3n) akan gaya setiap item ketiga (Item 3 dan Item 6) tanpa mengira jenis elemen mereka.

Menggunakan: Nth-of-type () Contoh:

Jika anda ingin gaya setiap elemen <div> dalam susun atur grid yang sama:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;grid&quot;&gt; &lt;div&gt;Item 1&lt;/div&gt; &lt;p&gt;Item 2&lt;/p&gt; &lt;span&gt;Item 3&lt;/span&gt; &lt;div&gt;Item 4&lt;/div&gt; &lt;p&gt;Item 5&lt;/p&gt; &lt;span&gt;Item 6&lt;/span&gt; &lt;div&gt;Item 7&lt;/div&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;.grid div:nth-of-type(2n) { background-color: lightgreen; }&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Dalam contoh ini,: <code>:nth-of-type(2n) akan gaya setiap elemen <div> kedua (item 4 dan item 7).<h3> Bagaimana saya boleh mengoptimumkan pemilih CSS saya menggunakan: nth-child () dan: nth-of-type () untuk prestasi yang lebih baik?</h3> <p> Untuk mengoptimumkan pemilih CSS menggunakan <code>:nth-child() dan :nth-of-type() untuk prestasi yang lebih baik, pertimbangkan strategi berikut:

<li>

Kecekapan dan kecekapan pemilih:

<li> Penggunaan :nth-of-type() bukannya :nth-child() apabila anda secara khusus perlu menargetkan unsur-unsur jenis tertentu. Ini boleh menjadi lebih cekap kerana penyemak imbas tidak perlu memproses elemen yang tidak berkaitan. <li> Pastikan pemilih anda spesifik seperti yang diperlukan tetapi sebagai umum yang mungkin untuk mengurangkan overhead padanan.
<li>

Kurangkan Dom Traversal:

<li>

Menggabungkan :nth-child() atau :nth-of-type() dengan pemilih kelas dapat membantu mengurangkan dom traversal yang diperlukan. Contohnya:

 <code class="css">.list-item:nth-child(2) { /* Style properties */ }</code>

Ini mensasarkan anak kedua dengan kelas .list-item , yang boleh menjadi lebih cekap daripada mencari melalui semua kanak-kanak.

<li>

Elakkan bersarang dalam:

<li>

Pemilih yang sangat bersarang boleh melambatkan prestasi. Menggunakan :nth-child() atau :nth-of-type() boleh membantu mengelakkan keperluan untuk pemilih yang terlalu spesifik. Contohnya:

 <code class="css">ul li:nth-child(2) { /* Instead of */ /* ul > li > ul > li:nth-child(2) */</code>

<li>

Hadkan kerumitan pemilih:

<li> Pastikan pemilih mudah dan elakkan menggabungkan terlalu banyak kelas pseudo. Sebagai contoh, satu :nth-child(2) mungkin lebih baik daripada gabungan kompleks kelas pseudo dan pemilih atribut.
<li>

Gunakan preprocessors CSS:

<li> Preprocessors CSS seperti SASS atau kurang dapat membantu anda menulis lebih banyak CSS yang dapat dipelihara dan cekap. Mereka boleh membantu anda menguruskan pemilih yang kompleks dan mengelakkan pengulangan, secara tidak langsung membawa kepada prestasi yang lebih baik.

Dengan melaksanakan strategi ini, anda dapat memastikan bahawa penggunaan anda :nth-child() dan :nth-of-type() dioptimumkan untuk prestasi.