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>
效果如下图所示: