数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
