共享博客SASS 中的最后一个子级和最后一个类型选择器
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’元素用于选择父元素中特定类型的最后一个子元素。
-
css如何让导航栏变透明
在css中，可以通过opacity属性来让导航栏变透明，只需要给导航栏元素添加“opacity: 透明度值;”样式即可；...
CSS
4周前 (09-20) 50 -
css 怎么去除a标签的手形
css去除a标签的手形的方法：1、创建一个html示例文件；2、设置一个a标签；3、给a标签添加一个css属性为“cur...
CSS
4周前 (09-20) 34 -
css里怎样设置字体大小和字体颜色
在css中，可以使用“font-size”和color属性设置字体大小和字体颜色，只需要给字体元素添加“{font-si...
CSS
4周前 (09-20) 39 -
css如何固定导航栏
在css中，可以使用position属性固定导航栏；只需要给导航栏元素添加“position: fixed;”样式进行固...
CSS
4周前 (09-20) 30 -
css边框变圆角边框怎么写
写法：1、给边框添加“border-radius:圆角值;”样式统一设置圆角大小；2、添加“border-top-lef...
CSS
4周前 (09-20) 36