通用兄弟选择器 + ~
2016-09-27 本文已影响91人
Simon_s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
height: 30px;
background-color: red;
}
/* + 当前元素的下一个 /
.item1+p{
background-color: aqua;
}
/当前之后的所有p元素的样式*/
.item3~p{
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
</div>
</body>
</html>
