壹 ❀ 引
實習生在寫搜索框下拉提示時，遇到了不知道怎么解決的問題，所以來問我。效果不難，鼠標選中輸入框(focus)時，展示搜索關鍵字相關提示，看了眼dom結構是這樣的：
在她的理解里面，選中父元素可以操控子元素樣式，而此時輸入框和下拉框是兄弟關系，所以難住了，聽到這里我不假思索說了句，用兄弟選擇器。
貳 ❀ 兄弟選擇器
1.相鄰兄弟選擇器+
+表示相鄰兄弟選擇器，例如h3+p表示選中每個h1之后同級（相同父級）且緊接其后的第一個p元素；我們來看看效果：
h3+p{ background: #bbded6; color: #fff; } <p>葡萄</p> <h3>我是聽風是風</h3> <p>蘋果</p> <p>橘子</p> <div> <p>香蕉</p> </div> <h3>我是聽風是風</h3> <p>桃子</p>
可以看到，h3之前的p標簽不會生效，非同級的p標簽也不會生效，有效的只有緊接h3之后的p標簽。
2.通用兄弟選擇器
~表示通用兄弟選擇器，例如h3~p表示選中每個h3之后同級（相同父級）所有p元素；我們將選擇器由 + 改為 ~ ，效果如下圖：
可以看到，h3之后所有同級p標簽全部被選中。
那么到這里，我們了解了兩種兄弟選擇器+與~，二者區別在於+選擇器用於選擇緊跟目標標簽之后的第一個兄弟標簽，而~會選擇目標標簽之后所有兄弟標簽。
現在你能區分兩個選擇器的區別了嗎？