选择器可以选择
- 类(或ID)
- 标签
- 类(或ID)与标签组合
表示方式为:
类 | 标签 | ID | HTML | class="cla" | <lab> | id="num" | CSS | .cla | lab | #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%;
}
}
//或者是反过来写
.cla2 {
.cla1 + & {
width: 100%;
}
}
4、子代(类)选择器
.cla1>.cla2>.cla3 {
width: 100%;
}
.cla1 {
>.cla2>.cla3 {
width: 100%;
}
}
//或者是从子类写到父类(根据自己实际需要)
.cla2 {
.cla1>&>.cla3 {
width: 100%;
}
}
5、后代(类)选择器
.cla1 .cla3 {
width: 100%;
}
.cla1 {
.cla3 {
width: 100%;
}
}
//或者是从子类写到父类(根据自己实际需要)
.cla3 {
.cla1 & {
width: 100%;
}
}
6、伪类选择器
a:link {
color: #ffffff;
}
a {
&:link {
color: #ffffff;
}
}
7、自定义类(BEM)的选择
.cla1 {
width: 100%;
}
.cla2 {
width: 100%;
}
//以前的用法
.cla {
@at-root #{&}1 {
width: 100%;
}
@at-root #{&}2 {
width: 100%;
}
}
//新支持的用法(后面最好不要跟【标签】或【属性】名)
.cla {
&1 {
width: 100%;
}
&2 {
width: 100%;
}
}
8、属性的选择
.cla1 {
border-width: 1px;
border-style: soild;
border-color: #ffffff;
}
.cla1 {
//特别注意,下面需要写冒号(:)
border: {
width: 1px;
stlye: soild;
color: #ffffff;
}
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!