資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究SASS 中的 last-child 和 last-of-type 選擇器
SASS 提供了比普通 CSS 更多的功能，可以編寫易於維護的程式碼，而高階選擇器就是其中之一。SASS 包含 last-child 和 last-of-type 選擇器，我們將在本教程中討論它們。
SASS 中的 Last-child 選擇器
“last-child” 選擇器允許開發人員選擇父元素內的最後一個元素。此外，它允許您選擇最後一個 HTML 元素，而不管元素的型別如何。如果最後一個元素包含巢狀的子元素，它也會將樣式應用於巢狀元素，因為它們是最後一個子元素的一部分。
語法
使用者可以按照以下語法在 CSS 中使用“last-child”選擇器。
.element :last-child {
/* CSS code */
}
以上語法將選擇包含“element”類名的 HTML 元素的最後一個子元素。
示例
在 index.html 檔案中，我們建立了“container”div 元素，並添加了兩個段落和一個作為最後一個子元素的 div 元素。
在 SCSS 檔案中，我們使用“last-child”選擇器來選擇 container 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 選擇器
“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”元素用於選擇父元素中特定型別的最後一個子元素。
4K+ 瀏覽量
