日常寫代碼碰到這個選擇器，‘~’，傻傻分不清 ‘+’ 跟 ‘~’的區別，雖然我知道他們都是兄弟選擇器。
現在拿這兩個選擇器來測試了一下。發現原來是這樣的。
先來代碼說話：
（1）、‘~’選擇器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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）、‘+’選擇器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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>
|
代碼還是那些，只是把‘~’換成了‘+’，結果是大不相同。
![]()
通過這兩個例子，可以發現雖然這兩個選擇器都表示兄弟選擇器，但是‘+’選擇器則表示某元素後相鄰的兄弟元素，也就是緊挨着的，是單個的。而‘~’選擇器則表示某元素後所有同級的指定元素，強調所有的。
