Rumah > Artikel > hujung hadapan web > Bagaimana untuk memilih "anak terakhir" kategori tertentu menggunakan CSS?
Bagaimana untuk memilih "anak terakhir" kategori tertentu menggunakan CSS?
- WBOYke hadapan
- 2023-08-29 11:13:171120semak imbas
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 */
}
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>
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 */
}
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>
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);
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>
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!