选择器可以选择
- 类(或ID)
- 标签
- 类(或ID)与标签组合
表示方式为:
类 标签 ID HTML class=”cla” <lab> id=”num” CSS .cla lab #num
注意:类与ID类似,下面的例子的类也可以换成ID
一、CSS的选择器
1、多(类)选择器
(1)类或标签
选择含有”cla1 cla2″的标签,改变【内容2】、【内容3】
.cla1.cla2 {
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;
}
}
今天的文章CSS与SCSS的选择器总结分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/21086.html