相鄰選擇器：首先要知道瀏覽器的一個特性，他是從上向下執行的。只選中他的兄弟類，所以也叫兄弟選擇器。
方式1：類名1 + 類名2{ } 只能選中類名2
方式2：類名1 ~ div { } 除了類名1不會選中，他所有兄弟類都會被選中。
方式1：選中類b
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>相鄰選擇器</title> <style> div{ width: 400px; height: 50px; margin: 20px; background: white; border: 1px solid black; } .a + div{ background: #000000; //這里也可以這樣寫 ：.a + .b //.a + .c 也可以選中類c } </style> </head> <body> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </body> </html>
方式二：選中類a的所有兄弟類
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>相鄰選擇器</title> <style> div{ width: 400px; height: 50px; margin: 20px; background: white; border: 1px solid black; } .a ~ div{ background: #000000; //當然也可以這樣寫.a ~.c {} 它就只會選中類c。 } </style> </head> <body> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </body> </html>
