day9 兄弟选择器 ~和+

前言

在day1_1 html和CSS基础里介绍了四种基础选择器、后代选择器、子选择器等，现在介绍一下两种兄弟选择器。

brother1~brother2

brother1~brother2 选择器匹配出现在 brother1 后面的brother2。
brother1 和 brother2 这两种元素必须具有相同的父元素，但 brother2 不必紧跟在 brother1 的后面，意思是可以选择brother1后的所有兄弟元素，而不是可以选择brother1之前的兄弟元素。

.example11 p~ol {
            background-color: aqua;
        }

<div class="example11">
        <p>example1</p>
        <ul>
            <li>啦啦啦</li>
            <li>哒哒哒</li>
        </ul>

        <ol>
            <li>滴滴滴</li>
            <li>哈哈哈</li>
        </ol>
        <ol>
            <li>滴滴滴</li>
            <li>哈哈哈</li>
        </ol>
        <ol>
            <li>滴滴滴</li>
            <li>哈哈哈</li>
        </ol>

    </div>

    

brother1+brother2

brother1+brother2 选择器仅匹配与brother1相邻的brother2。

.example22 p+ul {
            background-color: aqua;
        }

<div class="example22">
        <p>example2</p>
        <ul>
            <li>啦啦啦</li>
            <li>哒哒哒</li>
        </ul>
        <ul>
            <li>啦啦啦</li>
            <li>哒哒哒</li>
        </ul>
        <ul>
            <li>啦啦啦</li>
            <li>哒哒哒</li>
        </ul>
        <ol>
            <li>滴滴滴</li>
            <li>哈哈哈</li>
        </ol>
    </div>

如果把.example2 p+ul { background-color: aqua; }换成p+ol会像下图这样什么都没有改变，因为ol不是p相邻的兄弟元素，这种选择器只能改变与其相邻的兄弟元素。