SASS中的last |
您所在的位置:网站首页 › child和boy › SASS中的last |
SASS中的last-child和last-of-type选择器
SASS提供了许多功能,使编写简单且易于维护的代码成为可能,其中高级选择器就是其中之一。SASS包含了last-child和last-of-type选择器,我们将在本教程中讨论它们。 SASS中的last-child选择器‘last-child’选择器允许开发人员选择父元素内的最后一个元素。同时,它还允许您选择最后一个HTML元素,无论元素类型如何。如果最后一个元素包含嵌套的子元素,它也会对嵌套元素应用样式,因为它们是最后一个子元素的一部分。 语法用户可以按照以下语法在CSS中使用‘last-child’选择器。 .element :last-child { /* CSS code */ }上述语法将选择包含”class=’element'”的HTML元素的最后一个子元素。 示例在index.html文件中,我们创建了”container” div元素,并添加了两个段落和一个作为最后一个子元素的div元素。 在SCSS文件中,我们使用”last-child”选择器来选择container div元素的最后一个元素。在输出中,我们可以观察到样式被应用到子div元素上。 文件名 – index.html Using the :last-child selector in SCSS.First paragraph Last paragraph Not a paragraph but last child.文件名 – style.scss .container :last-child { color: red; }编译后,它会生成以下代码。 文件名- style.css .container :last-child { color: red; } 示例 /* style.css obtained from filename – style.scss */ .container :last-child { color: red; } Using the :last-child selector in SCSSFirst paragraph Last paragraph Not a paragraph but last child. 示例在下面的示例中,我们在父div元素中添加了多个子div元素。此外,我们还在最后一个div元素中添加了多个级别的嵌套子元素。 在SCSS文件中,我们使用了last-child选择器来选择父div元素的最后一个元素。在输出中,用户可以看到样式也应用于最后一个子元素的嵌套子元素。 文件名 – index.html Using the :last-child selector in SCSS. First Second Third Nested Level 1 Nested Level 2文件名 – 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; } 示例 /* style.css obtained from filename – style.scss */ .parent :last-child { font-size: 3rem; color: green; font-weight: bold; } Using the :last-child selector in SCSS. First Second Third Nested Level 1 Nested Level 2 SASS中的last-of-type选择器‘last-of-type’选择器允许开发者选择父元素div中的特定类型的最后一个元素。因此,在使用‘last-of-type’选择器时,我们需要使用选择器指定元素类型。我们可以使用类名,标签名,元素名,id等来指定元素类型。 语法用户可以遵循以下语法来使用SASS的‘last-of-type’ CSS选择器。 p:last-of-type { /* CSS code */ }以上语法选择了父元素中的最后一个“p”元素。 示例在下面的示例中,我们创建了一个 class 名为“multiple”的 div 元素。然后,我们插入了两个段落元素和最后一个 div 元素。 在 SASS 中,我们使用了“last-of-type”选择器来选择“multiple”元素中的最后一个“p”元素。用户可以观察到样式应用于最后一个“p”元素,即使它不是最后一个子元素。 文件名 – index.html Using the :last-of-type selector in SCSS.First Second Last element文件名 – style.scss .multiple p:last-of-type { color: blue; font-size: 3rem; }编译后,它生成以下代码。 文件名:style.css .multiple p:last-of-type { color: blue; font-size: 3rem; } 示例 /* style.css obtained from filename – style.scss */ .multiple p:last-of-type { color: blue; font-size: 3rem; } Using the :last-of-type selector in SCSS.First Second Last element 示例在下面的示例中,我们创建了多个包含“fruit”类的div元素。另外,我们创建了最后的一个包含“bike”类名的div元素。 在SASS代码中,我们使用了“.fruit:last-of-type”选择器来选择最后一个包含“fruit”类名的元素。在输出中,用户可以观察到它已经样式化了倒数第二个div元素,即最后一个包含“fruit”类名的元素。 文件名 – index.html Using the :last-of-type selector in SCSS. Apple Banana Orange Watermelon This is bike div.文件名 – 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; } 示例 /* style.css obtained from filename – style.scss */ .fruit :last-of-type { background-color: orange; color: white; font-size: 2rem; } Using the :last-of-type selector in SCSS. Apple Banana Orange Watermelon This is bike div.用户学习了在SASS中使用‘last-child’和‘last-of-type’选择器。‘last-child’选择器用于选择父元素中的最后一个元素,在任何条件下都可以使用。‘last-of-type’元素用于选择父元素中特定类型的最后一个子元素。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |