1、兄弟选择器
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| element+element | div+p | 选择紧接在 div 元素之后的所有 p 元素。 | 2 |
| element1~element2 | div~p | 选择在div元素之后的所有p元素。 | 3 |
2、效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS相邻兄弟选择器</title>
<style type="text/css">
.div2+p{
color: red;
}
</style>
</head>
<body>
<p class="p">p1</div>
<div class="div1">div1</div>
<p class="p">p2</div>
<div class="div2">div2</div>
<p class="p">p3</div>
<div class="div3">div3</div>
<p class="p">p4</div>
<div class="div4">div4</div>
<p class="p">p5</div>
<div class="div5">div5</div>
</body>
</html>
运行效果：
image.png
如果使用 ** div~p** 运行效果：
image.png
网友评论