兄弟选择器,指的是在同一级的情况下,修改当前同一级的标签的样式。
1、相邻兄弟选择器
两个标签相邻时,使用相邻兄弟选择器,可以对后一个标签进行样式修改。
格式:标签1+标签2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
h2 + h1 {
color: yellow;
}
</style>
</head>
<body>
<h2>1111</h2>
<h1>2222</h1>
<p>3333</p>
<p>4444</p>
<p>5555</p>
</body>
</html>
2、通用兄弟选择器
当两个标签不相邻时,要想修改后一个标签的样式,需要使用通用兄弟选择器。
格式:标签1~标签2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
h2 ~ p {
color: fuchsia;
}
</style>
</head>
<body>
<h2>1111</h2>
<h1>2222</h1>
<p>3333</p>
<p>4444</p>
<p>5555</p>
</body>
</html>