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. 效果圖