国产视频app今天有人問我,在CSS的兄弟選擇器中'+'號和'~'號碼的區別是什么,而我自己對這個問題也不是很清除,當然,如果想弄清楚一個問題,用實踐的方式比較好,今天就通過舉幾個例子來說明一個,CSS選擇器中的加號和“~”號的區別在什么地方!

CSS兄弟相鄰選擇器加號

相鄰兄弟選擇器使用了加號(+),即相鄰兄弟結合符(Adjacent sibling combinator)。

国产视频app注釋:與子結合符一樣,相鄰兄弟結合符旁邊可以有空白符。

CSS兄弟相鄰選擇器加號,舉例說明

HTML代碼

<p>這里是第一個P標簽</p>
<p>這里是第二個P標簽</p>
<h2 class = 'h2'>標題H2</h2>
<p>這里是第一個P標簽</p>
<p>這里是第二個P標簽</p>
<p>這里是第三個P標簽</p>
<p>這里是第四個P標簽</p>

CSS代碼

.h2 + p{
    color: red;
}

代碼圖示

CSS兄弟選擇器符號‘+’號與‘~’號的區別

代碼運行結果

CSS兄弟選擇器符號‘+’號與‘~’號的區別

總結:由上面的代碼可以看出,CSS兄弟相鄰選擇器加號“+”,可以選擇指定元素相鄰的下一個元素,可以選擇h2元素后面緊跟的相鄰的第一個P元素標簽

CSS兄弟選擇器~(匹配選擇器)

'~'匹配所有在指定元素之后的同級某個元素

国产视频app舉例說明一個,CSS的匹配選擇器

HTML代碼

<p>這里是第一個P標簽</p>
<p>這里是第二個P標簽</p>
<h2 class = 'h2'>標題H2</h2>
<p>這里是第一個P標簽</p>
<p>這里是第二個P標簽</p>
<p>這里是第三個P標簽</p>
<p>這里是第四個P標簽</p>

CSS代碼

.h2 ~ p{
    color: red;
}

代碼圖示

CSS兄弟選擇器符號‘+’號與‘~’號的區別

代碼運行結果

CSS兄弟選擇器符號‘+’號與‘~’號的區別

總結:CSS中的兄弟選擇符號‘~’,可以選擇指定元素后的,同級的相同的所有元素。比如上面的示例,所以h2標簽后的P標簽全部被選擇,并加入了樣式

国产视频app通過這兩個例子,可以發現雖然這兩個選擇器都表示兄弟選擇器,但是‘+’選擇器則表示某元素后相鄰的兄弟元素,也就是緊挨著的,是單個的。而‘~’選擇器則表示某元素后所有同級的指定元素,強調所有的。