CSS与SCSS的选择器总结

选择器可以选择

类（或ID）、

标签、

类（或ID）与标签组合

表示方式为：

类标签ID

HTMLclass="cla"<lab>id="num"

CSS.clalab#num

注意：类与ID类似，下面的例子的类也可以换成ID

一、CSS的选择器

1、多（类）选择器

（1）类或标签

选择class=“cla1 cla2 cla3”的标签，改变【内容3】

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

内容1 </div><div class="cla1 cla2">

内容2 </div><div class="cla1 cla2 cla3">

内容3 </div>

（2）标签与类的组合

table.cla1.cla2 { width: 100%;}

内容 </table>

2、群组选择器

（1）类或标签

选择含有cla1、cla2、cla3任一个class的标签，改变【内容1】、【内容2】、【内容3】

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

内容1 </div><div class="cla1 cla2">

内容2 </div><div class="cla1 cla2 cla3">

内容3 </div>

（2）标签与类的组合

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

内容1 </div><div class="cla2">

内容2 </div><table>

内容3 </table>

3、相邻选择器

（1）类或标签

选择cla1后面紧接的cla2（同一父级），改变【内容2】

.cla1 + .cla2 { width: 100%;}

内容1 　　</div> <div class="cla2">

内容2 　　</div></div>

（2）标签与类的组合

h1 + cla1 { width: 100%;}

内容1 　　</h1> <div class="cla1">

内容2 　　</div></div>

4、子代(类)选择器

（1）类或标签

选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】

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

内容1 　　　　　　　<div class="cla3">

内容2 </div> </div> </div></div>

（2）标签与类的组合

table>.cla1>td { width: 100%}

内容　　　　　</td> </div></table>

5、后代(类)选择器

（1）类或标签

选择 cla1后代里面的全部cla3标签（不管后代嵌套得有多深），改变【内容1】、【内容2】

.cla1 .cla3 { width: 100%;}

内容1 <div class="cla3">

内容2 </div> </div> </div></div>

（2）标签与类的组合

.cla1 h1 { width: 100%;}

内容　　　　　</h1> </td></div>

6、伪类选择器

伪类必须配合正常的类来使用，改变未访问的链接【内容】

a:link { color: #fff}

<a>

内容 </a>

二、SCSS的选择器

1、多（类）选择器

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

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

2、群组选择器

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

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

3、相邻选择器

.cla1 { & + .cla2 { width: 100%; }}

.cla1 + .cla2 { width: 100%;}

4、子代（类）选择器

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

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

5、后代（类）选择器

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

.cla1 .cla3 { width: 100%;}

6、伪类选择器

a { &:link { color: #ffffff; }}

a:link { color: #ffffff;}

7、自定义类（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%;}

8、属性的选择

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

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。