1.兄弟选择器(brother selector,BS):BS是CSS3.0新增的一个选择器,语法格式:A~B{...}(A、B为HTML元素/标签,表示A标签匹配selector的A,B标签匹配selector的B时,B标签匹配样式)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>兄弟选择器</title> <style type="text/css"> h1~p{ color:red; } </style> </head> <body> <p>Hello word!</p> <p>Hello word!</p> <h1>Hello word!</h1> <p>Hello word!</p> <p>Hello word!</p> <p>Hello word!</p> <p>Hello word!</p> </body> </html>
效果如下图所示:
2.相邻兄弟选择器(Adjacent sibling Selector)可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>相邻兄弟选择器</title> <style type="text/css"> h1+p{ color:red; } </style> </head> <body> <p>Hello word!</p> <p>Hello word!</p> <h1>Hello word!</h1> <p>Hello word!</p> <p>Hello word!</p> <p>Hello word!</p> <p>Hello word!</p> </body> </html>
效果如下图所示: