Bagaimana untuk Memilih Elemen Kedua hingga Terakhir dalam CSS?

Pemilih CSS untuk Elemen Kedua Terakhir

Apabila menggunakan CSS, adalah perkara biasa untuk memilih elemen berdasarkan kedudukannya dalam elemen induk. Walaupun :last-child ialah pilihan popular untuk memilih elemen terakhir, adakah terdapat cara untuk memilih elemen sebelum elemen terakhir?

Untuk mencapai ini, anda boleh menggunakan pemilih :nth-last-child dalam CSS3. Begini cara ia berfungsi:

<code class="css">:nth-last-child(2) {
  /* Styling for the second last child */
}</code>

Dalam contoh ini, pemilih :nth-last-child(2) akan memadankan elemen iaitu dua daripada hujung elemen induknya. Dalam HTML yang ditentukan, ia akan memilih elemen berikut:

<code class="html"><div>SELECT THIS</div></code>

Berikut ialah versi HTML yang dikemas kini dengan pemilih yang sesuai digunakan:

<code class="html"><div id="container">
  <div>a</div>
  <div>b</div>
  <div class="second-last">SELECT THIS</div>
  <div>c</div>
</div></code>

<code class="css">#container .second-last {
  /* Styling for the second last child of #container */
  background-color: lightblue;
}</code>

Pelayar yang disokong untuk :anak-anak-terakhir termasuk:

• Chrome 2
• Firefox 3.5
• Opera 9.5 , 10
• Safari 3.1 , 4
• Internet Explorer 9

Atas ialah kandungan terperinci Bagaimana untuk Memilih Elemen Kedua hingga Terakhir dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!