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>
效果如圖：
兄弟只會印象下面的p標籤的樣式，不影響上面兄弟的樣式。
注意這裏的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應用在兄弟元素上，跟參照的元素樣式無關，如上例隻影響p元素的樣式，而不影響h1標籤的樣式。
當然這個也會循環查找，即當兩個兄弟元素相同時，會一次循環查找：
示例：
<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>
效果：
可以看出第一個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>
運行結果：
