scss选择器

 1、>，表示里面紧跟，即里面的第一个。

div > p { color: pink; }
div里紧跟着的p；即div里第一个p
 
div p { color: orange; }
div里的所有p；

2、+，表示后面紧跟 同一父级）。

h2 + p { color: pink; }
 h2后紧跟着的p

3、~，表示后面所有同层

div ~ div { color: pink; }
选择所有跟在div后的同层div元素，不管它们之间隔了多少其他元素

4、相邻选择器

在CSS选择器中还有一种是相邻兄弟选择器+
选择 label和 紧挨着label的input[type='text'] 元素。

lable {
    color: green;
 
    & + input[type="text"] {
        border: 1px solid green;
    }
}

5、 群组选择器

.cla1 {
    &, .cla2, .cla3 {
        width: 100%;
    }
}

编译后

.cla1, .cla2, .cla3 {
    width: 100%;
}

6、 子代（类）选择器

.cla1 {
    >.cla2>.cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据本身实际须要）
.cla2 {
    .cla1>&>.cla3 {
        width: 100%;
    }
}

编译后

.cla1>.cla2>.cla3 {
    width: 100%;
}

7、 后代（类）选择器

.cla1 { .cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据本身实际须要）
.cla3 {
    .cla1 & {
        width: 100%;
    }
}

编译后

.cla1 .cla3 {
    width: 100%;
}

8、 自定义类（BEM）的选择

//之前的用法
.cla {
    @at-root #{&}1 {
        width: 100%;
    }
    @at-root #{&}2 {
        width: 100%;
    }
}

//新支持的用法（后面最好不要跟【标签】或【属性】名）
.cla {
    &1 {
        width: 100%;
    }
    &2 {
        width: 100%;
    }
}

编译后

.cla1 {
    width: 100%;
}

.cla2 {
    width: 100%;
}

9、属性的选择

.cla1 {
    border: {
        width: 1px;
        style: soild;
        color: #ffffff;
    }
}

编译后

.cla1 {
    border-width: 1px;
    border-style: soild;
    border-color: #ffffff;
}