1、”~“的含义
<div class="root1">
<div class="child11">张三</div>
<div class="child12">李四(我会改变)</div>
<div class="child12">王五(我会改变)</div>
<div class="child14">
<div class="child12">赵六(我不会改变,我们不是一个父亲)</div>
<div class="child12">田七(我不会改变,我们不是一个父亲)</div>
</div>
</div>
.child11~.child12 {
color: yellowgreen;
}
效果如下
图片.png
在
root1
下存在多个child12
,如果需要设置与child11
平级的child12
的相关属性的话,就可以用到.child11~.child12
。
2、“>“的含义(子代选择器 只选取一代)
<div class="root">
<div class="child1">阿里(>只有我是红色的)</div>
<div class="child1">阿里(>只有我是红色的)</div>
<div class="child2">腾讯</div>
<div class="child3">
<div class="child1">阿里(我没改变)</div>
<div class="child2">腾讯</div>
<div class="veiw1">
<div class="child1">我是最里面的阿里</div>
</div>
</div>
</div>
.child1 {
color: green;
}
.root>.child1 {
color: red;
}
.child3>.child1 {
color: aqua;
}
图片.png
如果没有
.root>.child1
和.child3>.child1
的话上图中红色和青色的位置应该也会为绿色的,.root>.child1
从上图我们也能大概看出它的意思就是root
的下一层级当中的child1
,至于里面层级是否还有child1
,就不是我们需要关心的了。
3、”+“的含义(相邻选择器)
<div class="child22">第一行</div>
<div class="child21">第二行</div>
<div class="child23">你有没有受影响呢</div>
<div class="child22">第三行</div>
<div class="child21">第四行</div>
<div class="child22">第五行</div>
<div class="child22">第六行</div>
.child21+.child22 {
color: #FF0000;
}
图片.png
从上图结果中我们看出来
.child21+.child22
只改变了同级一定是相邻后一个child22
的属性。
4、空格(如.a .b,.a .b 所有子代)
<div class="root3">
<h1>演示 .a .b </h1>
<div class="child31">大哥</div>
<div class="child31">二哥</div>
<div class="child31">三弟</div>
<div class="child32">你大爷的!</div>
<div>
<div class="child31">你会变吗</div>
</div>
</div>
.root3 .child31 {
color: #d71345;
}
图片.png
.root3 .child31
注意中间有个空格,表示在root3
节点下的所有child31
子节点。
5、.a.b(串联选择器)
<div class="root3 ">
<h1>演示 .a.b </h1>
<div class="child31 common">大哥继承</div>
<div class="child31 common">二哥继承</div>
<div class="child31">三弟没有我</div>
</div>
.child31.common {
color: greenyellow;
}
图片.png
网友评论