这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。
+ 选择器
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<style type="text/css">
li + li {
color:red;
}
</style>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
-
List item 1
-
List item 2
-
List item 3
~ 选择器
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
2