[TOC]
css 选择器
逗号 群组选择器
AB 应用同一个样式表
<div class="A"></div>
<div class="B"></div>
<style>
.A, .B {
width: 200px;
height: 200px;
background: Bisque ;
margin: 20px;
}
</style>
如果其中一个元素呈现格局谬误,则群组内的所有款式都会生效。比方下面.A 写成..A,则.A 和.B 的款式都不会失效。
空格 后辈选择器
抉择 A 后辈的所有 B 元素 (不论两头距离多少代)
<div class="A">
<div class="C">
<div class="B"></div>
</div>
<div class="B"></div>
</div>
<div class="B"></div>
<style>
* {
margin: 0px;
padding: 0px;
}
.A {
width: 200px;
height: 200px;
background: #e0ffff ;
margin: 20px;
}
.B {
width: 50px;
height: 50px;
background: Bisque ;
margin: 20px;
}
</style>
> 大于号 子元素选择器
抉择 A 的子元素中为 B 的元素 (只蕴含子这一层元素)
<div class="A">
<div class="B"></div>
</div>
<div class="A">
<div class="C">
<div class="B"></div>
</div>
</div>
<style>
.A {
width: 200px;
height: 200px;
background: #e0ffff ;
margin: 20px;
}
.A > .B {
width: 50px;
height: 50px;
background: Bisque ;
margin: 20px;
}
</style>
css3 开始反对 > 子元素选择器。
+ 加号 相邻兄弟选择器
抉择紧跟着 A 元素的 B 元素
<div class="A"></div>
<div class="B"></div>
<div class="B"></div>
<div class="C"></div>
<style>
.A + .B {
width: 50px;
height: 50px;
background: Bisque ;
margin: 20px;
}
</style>
如图只显示了一个色彩块,阐明只有一个 B 元素的款式失效
-
应用场景 多个雷同元素只有第一个元素款式不一样
<div class="B"></div> <div class="B"></div> <div class="B"></div> <style> .B { width: 50px; height: 50px; background: red; margin: 20px; } .B + .B { width: 50px; height: 50px; background: Bisque ; margin: 20px; } </style>
~ 兄弟选择器
与相邻兄弟选择器的区别是不须要紧跟着,只有是雷同父元素即可
<div class="B"></div>
<div class="A"></div>
<div class="B"></div>
<div class="A"></div>
<div class="B"></div>
<style>
.A {
width: 50px;
height: 50px;
background: #e0ffff;
margin: 20px;
}
.A + .B {
width: 50px;
height: 50px;
background: Bisque ;
margin: 20px;
}
</style>
从图看显示出 4 个元素,第一个 B 元素是没有款式的,因为它后面没有 A 元素