Bagaimana untuk memilih 'anak terakhir' kategori tertentu menggunakan CSS?-tutorial css-php.cn

如何使用 CSS 选择特定类别的“最后一个孩子”？

CSS atau Cascading Style Sheets ialah bahagian penting dalam pembangunan web moden, yang membolehkan pembangun web menambah gaya pada tapak web mereka dan mencipta reka bentuk yang menarik secara visual. Kadang-kadang kita ingin memilih elemen anak terakhir kelas tertentu menggunakan CSS, tetapi bagaimana untuk mencapai ini? Terdapat pelbagai cara untuk memilih elemen anak terakhir.

Dalam artikel ini, kita akan melihat cara memilih elemen anak terakhir dengan kelas tertentu menggunakan CSS.

Kaedah 1 menggunakan pemilih :last-child():

: Kaedah pemilih last-child() ialah kaedah pertama yang tersedia dalam CSS. Pemilih ini digunakan untuk memilih elemen anak terakhir bagi elemen induknya. Proses memilih elemen anak terakhir adalah sangat mudah. Untuk memilih elemen anak terakhir dengan kelas tertentu, kami menggunakan pemilih :last-child dalam kombinasi dengan pemilih kelas.

Lihat sintaks di bawah untuk mengetahui cara menggunakan pemilih anak terakhir untuk memilih elemen terakhir.

Tatabahasa

Dalam sintaks ini, katakan kita mempunyai senarai item dengan nama kelas "item" dan kita mahu menggayakan item terakhir dalam senarai secara berbeza, untuk melakukan ini kita boleh menggunakan Kod CSS berikut-

.item:last-child {
   /* Add your CSS styles here */
}

Salin selepas log masuk

Sintaks di atas akan memilih elemen anak terakhir dengan "item" kelas dan menggunakan gaya yang ditentukan padanya.

Contoh

Dalam contoh ini, kami menggunakan pemilih :last-child() untuk memilih elemen div terakhir dengan nama kelas "item" dan menambah gaya CSS padanya, seperti warna latar belakang hijau dan padding 10px.

<html>
<head>
   <title>Program to select the last child using :last-child() selector</title>
   <style>  
      /* Using the :last-child Selector */
      .item:last-child {
         background-color: green;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Method: Using the :last-child Selector</h2>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Fourth or Last Item</div>
</body>
</html>

Salin selepas log masuk

Kaedah 2: Gunakan pemilih :nth-last-child()

Ini ialah cara kedua untuk memilih elemen anak terakhir dengan kelas tertentu dalam CSS. Pemilih :nth-last-child digunakan untuk memilih elemen berdasarkan kedudukannya berbanding dengan penghujung elemen induk.

Kerja pemilih ini sangat mudah. Untuk memilih anak terakhir kelas tertentu dengan bantuan :nth-last-child selector, kita perlu menggabungkannya dengan pemilih kelas dan menetapkan nilai kepada 1. Lihat sintaks berikut untuk mendapatkan butiran lanjut tentang cara nth-last digunakan - pemilih anak digunakan untuk memilih elemen terakhir.

Tatabahasa

Dalam sintaks ini, dengan mengandaikan kita mempunyai satu siri elemen div dengan nama kelas "div-box", dan kini untuk menggayakan elemen div terakhir dalam siri ini, kita boleh menggunakan kod CSS berikut:

.div-box:nth-last-child(1) {
   /* Add your CSS styles here */
}

Salin selepas log masuk

Sintaks di atas akan memilih elemen anak terakhir dengan nama kelas "div-box" dan menggunakan gaya yang ditentukan padanya.

Contoh

Sintaks di atas akan memilih elemen anak terakhir dengan nama kelas "div-box" dan menggunakan gaya yang ditentukan padanya.

<html>
<head>
   <title>Program to select the last child using :nth-last-child() selector</title>
   <style>
      /* Using the :last-child Selector */
      .item:nth-last-child(1) {
         background-color: lightblue;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Method: Using the :nth-last-child Selector</h2>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Fourth or Last Item</div>
</body>
</html>

Salin selepas log masuk

Cara menggunakan JavaScript

Dalam kaedah ini kami memilih anak terakhir dengan kelas tertentu menggunakan JavaScript. Walaupun CSS ialah kaedah pilihan untuk menggayakan halaman web, JavaScript sebaliknya juga boleh digunakan untuk melaksanakan operasi Model Objek Dokumen dan memilih elemen HTML secara dinamik.

Dalam JavaScript, kaedah querySelector() digunakan dengan pemilih kelas dan pemilih :anak terakhir untuk memilih anak terakhir dengan kelas tertentu.

Proses memilih anak terakhir menggunakan JavaScript juga mudah. Untuk memilih anak terakhir kelas tertentu dengan bantuan javascript, kita perlu menggabungkannya dengan :last-child-selector kelas dan CSS. Lihat sintaks berikut untuk mendapatkan butiran lanjut tentang cara memilih elemen terakhir menggunakan javascript.

Tatabahasa

Dalam sintaks ini, kami mempunyai satu siri elemen div dengan kelas "div" dan kami ingin menambah kelas "add-color" pada div terakhir dalam senarai, kami boleh menggunakan kod JavaScript berikut -

ar lastDiv = document.querySelector('.div:last-child');
lastDiv.classList.add(add-color);

Salin selepas log masuk

Sintaks di atas akan memilih elemen anak terakhir dengan kelas "div" dan menambah kelas "tambah warna" padanya.

Contoh

Dalam contoh ini, kami mentakrifkan senarai elemen div dengan nama kelas "item" dan kemudian kami juga menambah beberapa gaya CSS. Sekarang untuk memilih elemen anak terakhir, kami mentakrifkan kelas yang dipanggil "serlahkan" dan kedutan akan menggayakan elemen div terakhir.

Di sini, kami telah menggunakan kaedah querySelector() dalam JavaScript, yang memilih elemen anak terakhir dengan "kelas" sebagai "item". Kemudian, kami juga menambah kelas "highlight" pada elemen yang dipilih menggunakan kaedah classList.add().

<html>
<head>
   <title>Program to select the last child using JavaScript</title>
   <style>
      /* Styling for divs */
      .item {
         background-color: #f1f1f1;
         padding: 10px;
         margin-bottom: 10px;
      }
      /* Styling for last div */
      .highlight { background-color: yellow;}
   </style>
</head>
<body>
   <h2>Method: Using JavaScript</h2>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Fourth or Last Item</div>
   <script>
   
      // Selecting the last div element with class "item"
      var lastDiv = document.querySelector('.item:last-child');
      
      // Adding the "highlight" class to the last div element to change its background color
      lastDiv.classList.add('highlight');
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Memilih elemen anak terakhir dengan kelas tertentu menggunakan CSS ialah tugas yang boleh dicapai dengan cara yang berbeza. Pemilih :last-child() dan :nth-last-child() ialah dua kaedah yang boleh digunakan untuk menyelesaikan tugas ini.

:last-child() selector digunakan untuk memilih elemen anak terakhir bagi elemen induknya. Untuk memilih elemen anak terakhir dengan kelas tertentu, kami menggunakan pemilih :last-child bersama-sama dengan pemilih kelas. Sebaliknya, pemilih :nth-last-child() digunakan untuk memilih elemen berdasarkan kedudukannya berbanding dengan penghujung elemen induk. Untuk memilih elemen anak terakhir bagi kelas tertentu menggunakan pemilih :nth-last-child, kita perlu menggabungkannya dengan pemilih kelas dan menetapkan nilai kepada 1.

Untuk meringkaskan, kedua-dua kaedah adalah berkesan untuk memilih elemen anak terakhir dengan kelas tertentu, dan kaedah yang hendak digunakan bergantung pada keperluan khusus pembangun web. Dengan menggunakan pemilih ini, pembangun web boleh meningkatkan penampilan dan kefungsian tapak web mereka untuk menjadikannya lebih menarik kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk memilih 'anak terakhir' kategori tertentu menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!