hujung hadapan web
tutorial css
Bagaimana untuk memilih 'anak terakhir' kategori tertentu menggunakan CSS?
Bagaimana untuk memilih 'anak terakhir' kategori tertentu menggunakan 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 */
}
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
