SCSS预编译之选择器

最新推荐文章于 2024-07-14 22:50:12 发布

Miketutu

最新推荐文章于 2024-07-14 22:50:12 发布

阅读量192

点赞数

文章标签： scss css 前端

本文链接：https://blog.csdn.net/Miketutu/article/details/130169676

版权

文章讲述了如何在SCSS中通过选择器将代码中第一个span的字体颜色设置为红色。提到了&__bottomZoon选择器语法，以及nth-child和nth-of-type的区别，前者选择类名前缀相同的子元素，后者用于选择特定类型的首个元素。示例代码展示了两种正确的方法来选中并修改第一个span的颜色。

摘要由CSDN通过智能技术生成

若需要将该代码中的第一个span中的字体颜色转化为红色，并且使用scss代码，代码如下:

&__bottomZoon{
            width: 312px;
            display: flex;
            justify-content: space-between;
            span{
                &:nth-child(2){
                    color: red;
                }
            }
        }

分析:

1、其中：&__bottomZoon这个语法是如果父元素下的子元素的类名前缀都是相同的，则用&+类名进行选择。

2、如果需要将第一个span中的字体颜色改变，则需要这样编写代码:

&__bottomZoon{
            width: 312px;
            display: flex;
            justify-content: space-between;
                span:nth-of-type(2){
                    color: red;
                }
            
        }

或者：

&__bottomZoon{
            width: 312px;
            display: flex;
            justify-content: space-between;
            span{
                &:nth-child(1){
                    color: red;
                }
            }
            
        }

注意：

nth-child（1）可以选择父元素下的第一个子元素，但是如果该父元素下有多个span标签，则nth-child(1)无法选择第一个span，这个时候就需要使用nth-of-type(1)来进行选择。

效果图: