选择器可以选择
类(或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%;}
<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;}