Rumah >hujung hadapan web >tutorial css >Anak terakhir dan pemilih jenis terakhir dalam SASS
Anak terakhir dan pemilih jenis terakhir dalam SASS
- 王林ke hadapan
- 2023-09-17 12:05:02757semak imbas
SASS menawarkan pelbagai ciri berbanding CSS biasa untuk menulis kod mudah dan boleh diselenggara, dan pemilih lanjutan adalah salah satu daripadanya. SASS mengandungi anak terakhir dan pemilih jenis terakhir, yang akan kita bincangkan dalam tutorial ini.
Pemilih anak terakhir dalam SASS
Pemilih "anak terakhir" membenarkan pembangun memilih elemen terakhir dalam elemen induk. Selain itu, ia membolehkan anda memilih elemen HTML terakhir tanpa mengira jenisnya. Jika elemen terakhir mengandungi elemen anak bersarang, ia juga akan menggunakan gaya pada elemen bersarang kerana ia adalah sebahagian daripada elemen anak terakhir.
tatabahasa
Pengguna boleh menggunakan pemilih "anak terakhir" dalam CSS mengikut sintaks berikut.
.element :last-child {
/* CSS code */
}
Sintaks di atas akan memilih elemen anak terakhir bagi elemen HTML yang mengandungi nama kelas "elemen".
Contoh
Dalam fail index.html, kami mencipta elemen div "bekas" dan menambah dua perenggan dan elemen div sebagai elemen anak terakhir.
Dalam fail SCSS, kami menggunakan pemilih "anak terakhir" untuk memilih elemen terakhir elemen div bekas. Dalam output, kita boleh melihat bahawa gaya telah digunakan pada elemen div kanak-kanak.
Nama fail – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Nama fail – style.scss
.container :last-child {
color: red;
}
Selepas penyusunan, kod berikut dihasilkan.
Nama fail – style.css
.container :last-child {
color: red;
}
Contoh
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.container :last-child {
color: red;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Contoh
Dalam contoh di bawah, kami telah menambah berbilang elemen div anak di dalam elemen div induk. Selain itu, kami menambah berbilang peringkat elemen anak bersarang dalam elemen div terakhir.
Dalam fail SCSS, kami menggunakan pemilih anak terakhir untuk memilih elemen terakhir elemen div induk. Dalam output, pengguna boleh melihat bahawa gaya juga digunakan pada elemen anak bersarang bagi elemen anak terakhir.
Nama fail – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Nama fail – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
Selepas penyusunan, kod berikut dihasilkan.
Nama fail – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
Contoh
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Pemilih jenis terakhir dalam SASS
Pemilih "jenis terakhir" membenarkan pembangun memilih elemen terakhir jenis tertentu dalam elemen div induk. Oleh itu, kita perlu menentukan jenis elemen menggunakan pemilih apabila menggunakan pemilih "jenis terakhir". Kita boleh menentukan jenis elemen menggunakan nama kelas, nama tag, nama elemen, id, dsb.
tatabahasa
Pengguna boleh menggunakan pemilih CSS "jenis terakhir" SASS mengikut sintaks berikut.
p:last-of-type {
/* CSS code */
}
Sintaks di atas memilih elemen "p" terakhir dalam elemen induk.
Contoh
Dalam contoh di bawah, kami mencipta elemen div dengan nama kelas yang sama dengan "berbilang". Selepas itu, kami memasukkan dua elemen perenggan dan elemen div terakhir.
Dalam SASS, kami menggunakan pemilih "jenis terakhir" untuk memilih elemen "p" terakhir dalam elemen "berbilang". Pengguna boleh melihat dalam output bahawa gaya digunakan pada elemen "p" terakhir walaupun ia bukan elemen anak terakhir.
Nama fail – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "multiple">
<p class = "single"> First </p>
<p class = "single"> Second </p>
<div class = "last">
Last element
</div>
</div>
</body>
</html>
Nama fail – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
Selepas penyusunan, kod berikut dihasilkan.
Nama fail – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
Contoh
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="multiple">
<p class="single"> First </p>
<p class="single"> Second </p>
<div class="last">
Last element
</div>
</div>
</body>
</html>
Contoh
Dalam contoh di bawah, kami telah mencipta berbilang elemen div yang mengandungi kelas "buah". Selain itu, kami mencipta elemen div terakhir yang mengandungi nama kelas "basikal".
Dalam kod SASS, kami menggunakan pemilih ".fruit :last-of-type" untuk memilih elemen terakhir yang mengandungi nama kelas "fruit". Dalam output, pengguna boleh melihat bahawa ia menggayakan elemen div kedua terakhir, yang merupakan elemen terakhir yang mengandungi nama kelas "buah".
Nama fail – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "fruit">
Apple
</div>
<div class = "fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class = "bike">
This is bike div.
</div>
</body>
</html>
Nama fail – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
Selepas penyusunan, kod berikut dihasilkan.
Nama fail – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
Contoh
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="fruit">
Apple
</div>
<div class="fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class="bike">
This is bike div.
</div>
</body>
</html>
Pengguna mempelajari cara menggunakan pemilih "anak terakhir" dan "jenis terakhir" dalam SASS. Pemilih "anak terakhir" digunakan untuk memilih elemen terakhir dalam elemen induk di bawah sebarang syarat. Elemen 'jenis terakhir' digunakan untuk memilih elemen anak terakhir jenis tertentu dalam elemen induk.
Atas ialah kandungan terperinci Anak terakhir dan pemilih jenis terakhir dalam SASS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!