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

css3选择器的比较（三） -- 元素选择器 （+， ~）的相关教程结束。