CSS与SCSS的选择器总结
选择器可以选择类（或ID）、标签、类（或ID）与标签组合表示方式为：类标签IDHTMLclass="cla"<lab>id="num"CSS.clalab#num注意：类与ID类似，下面的例子的类也可以换成ID一、CSS的选择器1、多（类）选择器（1）类或标签选择class=“cla1 cla2 cla3”的标签，改变【内容3】.cla1.cla2.cla3 { width: 100%;}<div class="cla1">内容1 </div><div class="cla1 cla2">内容2 </div><div class="cla1 cla2 cla3">内容3 </div>（2）标签与类的组合table.cla1.cla2 { width: 100%;}<table class="cla1 cla2">内容 </table>2、群组选择器（1）类或标签选择含有cla1、cla2、cla3任一个class的标签，改变【内容1】、【内容2】、【内容3】.cla1, .cla2, .cla3 { width: 100%;}<div class="cla1">内容1 </div><div class="cla1 cla2">内容2 </div><div class="cla1 cla2 cla3">内容3 </div>（2）标签与类的组合table, .cla1, .cla2 { width: 100%;}<div class="cla1">内容1 </div><div class="cla2">内容2 </div><table>内容3 </table>3、相邻选择器（1）类或标签选择cla1后面紧接的cla2（同一父级），改变【内容2】.cla1 + .cla2 { width: 100%;}<div class="cla0"> <div class="cla1">内容1 </div> <div class="cla2">内容2 </div></div>（2）标签与类的组合h1 + cla1 { width: 100%;}<div class="cla0"> <h1>内容1 </h1> <div class="cla1">内容2 </div></div>4、子代(类)选择器（1）类或标签选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】.cla1>.cla2>.cla3 { width: 100%;}<div class="cla1"> <div class="cla2"> <div class="cla3">内容1 <div class="cla3">内容2 </div> </div> </div></div>（2）标签与类的组合table>.cla1>td { width: 100%}<table> <div class="cla1"> <td>内容 </td> </div></table>5、后代(类)选择器（1）类或标签选择 cla1后代里面的全部cla3标签 （不管后代嵌套得有多深），改变【内容1】、【内容2】.cla1 .cla3 { width: 100%;}<div class="cla1"> <div class="cla2"> <div class="cla3">内容1 <div class="cla3">内容2 </div> </div> </div></div>（2）标签与类的组合.cla1 h1 { width: 100%;}<div class="cla1"> <td> <h1>内容 </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;}