css3选择器的比较（三） -- 元素选择器 （+， ~）

元素选择器中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. 效果图