在CSS中，波浪线符号（~）被称为波浪线兄弟选择器。它表示选择与前面的选择器相邻，并具有相同父元素的元素。波浪线兄弟选择器的表现形式为：选择器A~选择器B。

一般情况下，不怎么会运用到该选择器，但到了需要复杂精细的css动画环节或者需要切换时，就需要使用到该选择器了。

比如在网页中，需要在两个Tab之间进行切换，一般会通过JS代码实现，当列表1或列表2被点击后，下面的文本域就将切换。

下面是SASS代码，当然css代码也是可以实现的，只需要在此基础上稍作修改即可：

Sass

.container{
    position:relative;
    width:400px;
    margin: 50px auto;
}
​
input{
    display:none;
}
​
.nav{
    position:relative;
    overflow:hidden;
}
​
li{
    width:200px;
    float:left;
    text-align:center;
    background:#ddd;
}
​
li label{
    display:block;
    width:200px;
    line-height:36px;
    font-size:18px;
    cursor:pointer;
}
​
.content{
    position:relative;
    overflow:hidden;
    width:400px;
    height:100px;
    border:1px solid #999;
    box-sizing:border-box;
    padding:10px;
}
​
.content1,
.content2{
    display:none;
    width:100%;
    height:100%;
}
​
.nav1:checked ~ .nav li {
    background:#ddd;
    color:#000;
    
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
.nav2:checked ~ .nav li{
    background:#ddd;
    color:#000;
    
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}
​
.nav1:checked ~ .content > div{
    display:none;
    
    &:first-child{
    display:block;
    }
}
.nav2:checked ~ .content > div{
    display:none;
    
    &:last-child{
    display:block;
    }
}
​
.active {
        background:#ff7300;
        color:#fff;
}
​
.default{
    display:block;
}

HTML：

<div class="container">
    <input class="nav1" id="li1" type="radio" name="nav">
    <input class="nav2" id="li2" type="radio" name="nav">
    <ul class='nav'>
        <li class='active'><label for="li1">列表1</label></li>
        <li><label for="li2">列表2</label></li>
    </ul>
    <div class="content">
        <div class="content1 default">列表1内容:123456</div>
        <div class="content2">列表2内容:abcdefgkijkl</div>
    </div>
</div>

基本原理就是当nav1和nav2点击后将处于checked状态，此时通过波浪线兄弟选择器，切换下面元素的样式。从而实现了两个tab的切换。