Bagaimanakah saya boleh menggayakan elemen dengan nama kelas yang sama berdasarkan kedudukannya dalam DOM?

Menyasarkan Elemen Khusus dengan Nama Kelas: Pendekatan Kanak-Kanak ke-n CSS

Cabaran: Elemen gaya selektif dengan nama kelas yang sama berdasarkan mereka kedudukan, tanpa mengira lokasi mereka dalam penanda.

Penyelesaian: Gunakan nth-child() atau nth-of-type() pseudo-selector untuk menyasarkan elemen mengikut kedudukan ordinal mereka dalam elemen induk.

nth-child() Pseudo-Selector

nth-child(n) pseudo-selector membolehkan anda menggayakan elemen yang merupakan anak ke-n induknya. Sebagai contoh, untuk menyasarkan elemen pertama dengan kelas "myclass":

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

Untuk menyasarkan elemen kedua dan ketiga, gunakan pemilih berikut:

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () Pseudo-Selector

n-of-type(n) pseudo-selector berfungsi sama dengan nth-child(), tetapi ia memilih elemen berdasarkan jenisnya dalam induknya. Ini berguna apabila anda mempunyai berbilang elemen jenis yang sama dalam induk:

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}</code>

Contoh HTML:

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></code>

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggayakan elemen dengan nama kelas yang sama berdasarkan kedudukannya dalam DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!