元素选择器中w3cschool中有些翻译不太准确
比如 +:其实是与element1元素同级,位于element1元素之后的第一个element2元素
~:其实是与element1元素同级,位于element1元素之后的所有element2元素
1. 资料
第一个例子, 第一个元素有同级元素并且位于中间
2. html代码
<div class="dottop">外部dot上</div> <div class="dots"> <div class="dottop">内部dot上</div> <div class="dot">内部dot</div> <div class="dotbottom">内部dot下</div> <div class="dotbottom">内部dot下</div> <div class="dotbottom">内部dot下</div> </div> <div class="dotbottom">外部div下</div>
3. css样式
.dot ~ div{ border: 1px solid #000; } .dot + div{ color:red; }
4. 效果图
第二个例子,第一个元素有同级元素,位于同级元素的最后
2. html代码:
<div class="dottop">外部dot上</div>
<div class="dots">
<div class="dottop">内部dot上</div>
<div class="dotbottom">内部dot下</div>
<div class="dotbottom">内部dot下</div>
<div class="dotbottom">内部dot下</div>
<div class="dot">内部dot</div>
</div>
<div class="dotbottom">外部div下</div>
3. css样式与第一个例子相同
4. 效果图