兄弟选择器 + 和 ~
2018-06-22 本文已影响0人
啊啊啊阿南
1、 + 选择器
如果需要选择紧接在另一个元素后面的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
效果图1
注意：只会影响当前元素后面的兄弟元素的样式，不影响前面兄弟的样式 ，且不影响参照的元素的样式。
当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找。
示例：
<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>
效果图2
可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。
２、~ 选择器
查找某一个指定元素的后面的所有兄弟结点。
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
效果图3
