SASS 比普通 CSS 提供了各種功能來編寫簡單且可維護的代碼，高級選擇器就是其中之一。 SASS 包含最后一個子級和最后一個類型選擇器，我們將在本教程中討論。
SASS 中的最后一個子選擇器
“last-child”選擇器允許開發人員選擇父元素內的最后一個元素。此外，它還允許您選擇最后一個 HTML 元素，無論該元素的類型如何。如果最后一個元素包含嵌套子元素，它還會將樣式應用于嵌套元素，因為它們是最后一個子元素的一部分。
語法
用戶可以按照以下語法在 CSS 中使用“last-child”選擇器。
.element :last-child {
/* CSS code */
}
登錄后復制
上述語法將選擇包含“element”類名的 HTML 元素的最后一個子元素。
示例
在index.html 文件中，我們創建了“container”div 元素，并添加了兩個段落和一個div 元素作為最后一個子元素。
在 SCSS 文件中，我們使用“last-child”選擇器來選擇容器 div 元素的最后一個元素。在輸出中，我們可以觀察到樣式已應用于子 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>
登錄后復制
文件名 – style.scss
.container :last-child {
color: red;
}
登錄后復制登錄后復制
編譯后，生成如下代碼。
文件名 – style.css
.container :last-child {
color: red;
}
登錄后復制登錄后復制
示例
<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>
登錄后復制
示例
在下面的示例中，我們在父 div 元素中添加了多個子 div 元素。此外，我們在最后一個 div 元素中添加了多個級別的嵌套子元素。
在SCSS文件中，我們使用last-child選擇器來選擇父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 = "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>
登錄后復制
文件名 – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
登錄后復制
編譯后，生成如下代碼。
文件名 – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
登錄后復制
示例
<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>
登錄后復制
SASS 中的最后一個類型選擇器
“last-of-type”選擇器允許開發人員選擇父 div 元素中特定類型的最后一個元素。因此，我們需要在使用“last-of-type”選擇器時使用選擇器指定元素類型。我們可以使用類名、標簽名、元素名、id 等來指定元素類型。
語法
用戶可以按照以下語法來使用 SASS 的“last-of-type”CSS 選擇器。
p:last-of-type {
/* CSS code */
}
登錄后復制
上述語法選擇父元素中的最后一個“p”元素。
示例
在下面的示例中，我們創建了類名等于“multiple”的 div 元素。之后，我們插入了兩個段落元素和最后一個 div 元素。
在 SASS 中，我們使用“last-of-type”選擇器來選擇“multiple”元素中的最后一個“p”元素。用戶可以在輸出中觀察到樣式應用于最后一個“p”元素，即使它不是最后一個子元素。
文件名 – 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>
登錄后復制
文件名 – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
登錄后復制登錄后復制
編譯后，生成如下代碼。
文件名 – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
登錄后復制登錄后復制
示例
<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>
登錄后復制
示例
在下面的示例中，我們創建了包含“fruit”類的多個 div 元素。此外，我們創建了最后一個包含“bike”類名稱的 div 元素。
在 SASS 代碼中，我們使用“.fruit :last-of-type”選擇器來選擇包含“fruit”類名的最后一個元素。在輸出中，用戶可以觀察到它設置了倒數第二個 div 元素的樣式，這是包含“fruit”類名的最后一個元素。
文件名 – 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>
登錄后復制
文件名 – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
登錄后復制登錄后復制
編譯后，生成如下代碼。
文件名 – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
登錄后復制登錄后復制
示例
<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>
登錄后復制
用戶學習了如何使用 SASS 中的“last-child”和“last-of-type”選擇器。 “last-child”選擇器用于在任何條件下選擇父元素中的最后一個元素。 ‘last-of-type’元素用于選擇父元素中特定類型的最后一個子元素。
以上就是SASS 中的最后一個子級和最后一個類型選擇器的詳細內容，更多請關注www.92cms.cn其它相關文章！
