CSS選擇器之兄弟選擇器（~和+）
阿新 • • 發佈：2018-05-03
spa 例子 inf 代碼 但是 info 發現 效果 說話
今天在改以以前人家寫的網頁的樣式的時候，碰到這個選擇器，‘~’，當時我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的區別，雖然我知道他們都是兄弟選擇器。
後來網上查了下，也許是我查找的方式不對，沒有找到我想要的答案，於是私下拿這兩個選擇器來測試了一下。發現原來是這樣的。
先來代碼說話：
（1）、‘~’選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.h3 ~ p{
color: red;
}
</style>
</head>
<body>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<h3 class="h3">這是標題標簽</h3>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<h3>這是標題標簽</h3>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
</body>
</html>
效果如下：
（2）、‘+’選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.h3 + p{
color: red;
}
</style>
</head>
<body>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<h3 class="h3">這是標題標簽</h3>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<h3>這是標題標簽</h3>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
<p>這是段落標簽</p>
</body>
</html>
代碼還是那些，只是把‘~’換成了‘+’，結果是大不相同。
通過這兩個例子，可以發現雖然這兩個選擇器都表示兄弟選擇器，但是‘+’選擇器則表示某元素後相鄰的兄弟元素，也就是緊挨著的，是單個的。而‘~’選擇器則表示某元素後所有同級的指定元素，強調所有的。
CSS選擇器之兄弟選擇器（~和+）