兄弟选择器:
- 相邻兄弟选择器
匹配的相邻的元素 - 当前元素的【后面的一个】元素,前提必须有相同的父元素
语法:selector1+selector2- 通用兄弟选择器
匹配当前元素的【后面的所有兄弟】元素
语法:selector1~selector2
回顾:- 元素选择器 元素名{}
- class 类选择器 .类名{}
- id选择器 #id名{}
- 通用选择器
- 选择器1,选择器2,… 群组选择器
- 选择器1>选择器2 父子选择器
- 选择器1 选择器2 后代选择器
<!DOCTYPE html>
<html>
<head>
<title> 兄弟选择器 </title>
<meta charset="utf-8" />
<style>
.first~div{//.first+div
color:blue;
}
</style>
</head>
<body>
<p class="first">This is the top p</p>
<div id="d1">This is the first div</div>
<h1>This is the Header 1
<div>h元素中的div</div>
</h1>
<p class="final">This is the bottom p 你好世界</p>
<p>
This is the second p
</p>
<h2>this is h2</h2>
<div class="div1">h2 后面的 div</div>
</body>
</html>