SASS 比普通 CSS 提供了各種功能來(lái)編寫(xiě)簡(jiǎn)單且可維護(hù)的代碼，高級(jí)選擇器就是其中之一。 SASS 包含最后一個(gè)子級(jí)和最后一個(gè)類(lèi)型選擇器，我們將在本教程中討論。
SASS 中的最后一個(gè)子選擇器
“l(fā)ast-child”選擇器允許開(kāi)發(fā)人員選擇父元素內(nèi)的最后一個(gè)元素。此外，它還允許您選擇最后一個(gè) HTML 元素，無(wú)論該元素的類(lèi)型如何。如果最后一個(gè)元素包含嵌套子元素，它還會(huì)將樣式應(yīng)用于嵌套元素，因?yàn)樗鼈兪亲詈笠粋€(gè)子元素的一部分。
語(yǔ)法
用戶可以按照以下語(yǔ)法在 CSS 中使用“l(fā)ast-child”選擇器。
.element :last-child {
/* CSS code */
}
登錄后復(fù)制
上述語(yǔ)法將選擇包含“element”類(lèi)名的 HTML 元素的最后一個(gè)子元素。
示例
在index.html 文件中，我們創(chuàng)建了“container”div 元素，并添加了兩個(gè)段落和一個(gè)div 元素作為最后一個(gè)子元素。
在 SCSS 文件中，我們使用“l(fā)ast-child”選擇器來(lái)選擇容器 div 元素的最后一個(gè)元素。在輸出中，我們可以觀察到樣式已應(yīng)用于子 div 元素。
文件名 – 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>
登錄后復(fù)制
文件名 – style.scss
.container :last-child {
color: red;
}
登錄后復(fù)制登錄后復(fù)制
編譯后，生成如下代碼。
文件名 – style.css
.container :last-child {
color: red;
}
登錄后復(fù)制登錄后復(fù)制
示例
<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>
登錄后復(fù)制
示例
在下面的示例中，我們?cè)诟?div 元素中添加了多個(gè)子 div 元素。此外，我們?cè)谧詈笠粋€(gè) div 元素中添加了多個(gè)級(jí)別的嵌套子元素。
在SCSS文件中，我們使用last-child選擇器來(lái)選擇父div元素的最后一個(gè)元素。在輸出中，用戶可以觀察到樣式也應(yīng)用于最后一個(gè)子元素的嵌套子元素。
文件名 – 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>
登錄后復(fù)制
文件名 – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
登錄后復(fù)制
編譯后，生成如下代碼。
文件名 – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
登錄后復(fù)制
示例
<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>
登錄后復(fù)制
SASS 中的最后一個(gè)類(lèi)型選擇器
“l(fā)ast-of-type”選擇器允許開(kāi)發(fā)人員選擇父 div 元素中特定類(lèi)型的最后一個(gè)元素。因此，我們需要在使用“l(fā)ast-of-type”選擇器時(shí)使用選擇器指定元素類(lèi)型。我們可以使用類(lèi)名、標(biāo)簽名、元素名、id 等來(lái)指定元素類(lèi)型。
語(yǔ)法
用戶可以按照以下語(yǔ)法來(lái)使用 SASS 的“l(fā)ast-of-type”CSS 選擇器。
p:last-of-type {
/* CSS code */
}
登錄后復(fù)制
上述語(yǔ)法選擇父元素中的最后一個(gè)“p”元素。
示例
在下面的示例中，我們創(chuàng)建了類(lèi)名等于“multiple”的 div 元素。之后，我們插入了兩個(gè)段落元素和最后一個(gè) div 元素。
在 SASS 中，我們使用“l(fā)ast-of-type”選擇器來(lái)選擇“multiple”元素中的最后一個(gè)“p”元素。用戶可以在輸出中觀察到樣式應(yīng)用于最后一個(gè)“p”元素，即使它不是最后一個(gè)子元素。
文件名 – 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>
登錄后復(fù)制
文件名 – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
登錄后復(fù)制登錄后復(fù)制
編譯后，生成如下代碼。
文件名 – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
登錄后復(fù)制登錄后復(fù)制
示例
<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>
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了包含“fruit”類(lèi)的多個(gè) div 元素。此外，我們創(chuàng)建了最后一個(gè)包含“bike”類(lèi)名稱(chēng)的 div 元素。
在 SASS 代碼中，我們使用“.fruit :last-of-type”選擇器來(lái)選擇包含“fruit”類(lèi)名的最后一個(gè)元素。在輸出中，用戶可以觀察到它設(shè)置了倒數(shù)第二個(gè) div 元素的樣式，這是包含“fruit”類(lèi)名的最后一個(gè)元素。
文件名 – 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>
登錄后復(fù)制
文件名 – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
登錄后復(fù)制登錄后復(fù)制
編譯后，生成如下代碼。
文件名 – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
登錄后復(fù)制登錄后復(fù)制
示例
<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>
登錄后復(fù)制
用戶學(xué)習(xí)了如何使用 SASS 中的“l(fā)ast-child”和“l(fā)ast-of-type”選擇器。 “l(fā)ast-child”選擇器用于在任何條件下選擇父元素中的最后一個(gè)元素。 ‘last-of-type’元素用于選擇父元素中特定類(lèi)型的最后一個(gè)子元素。
以上就是SASS 中的最后一個(gè)子級(jí)和最后一個(gè)類(lèi)型選擇器的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
