CSS中+號表示相鄰選擇器,也叫做相鄰兄弟選擇器。它的作用是選擇指定元素的下一個兄弟元素。
p + span { color: red; }
在上面的代碼中,當(dāng)一個p元素后面緊跟著一個span元素時,這個選擇器就會起作用,并且應(yīng)用color:red樣式。
需要注意的是,+號選擇器只會選擇緊鄰著的下一個兄弟元素。如果兩個元素之間有空格或其他元素隔開,+號選擇器就不起作用了。
下面是一個+號選擇器的實際例子:
<div> <p>這是第一個段落</p> <span>這是一個span元素</span> <p>這是第二個段落</p> <span>這是第二個span元素</span> </div> div p + span { color: red; }
在這個例子中,選擇器div p + span會選中第一個p元素后面的span元素,但不會選中第二個p元素后面的span元素。
相鄰兄弟選擇器可以在某些情況下很有用,比如在一個列表中給每個項的第一個元素添加樣式。
<ul> <li>第一個li元素</li> <li>第二個li元素</li> <li>第三個li元素</li> <li>第四個li元素</li> <li>第五個li元素</li> </ul> li:first-child { font-weight: bold; } li + li { margin-top: 10px; }
在這個例子中,選擇器li + li會選中每個li元素列表中的第二個到最后一個li元素,并給它們添加margin-top:10px樣式。
總之,CSS中的+號選擇器可以很方便的選擇指定元素的下一個兄弟元素,為我們的樣式設(shè)置帶來便利。