CSS中+号表示相邻选择器,也叫做相邻兄弟选择器。它的作用是选择指定元素的下一个兄弟元素。
p + span { color: red; }
在上面的代码中,当一个p元素后面紧跟着一个span元素时,这个选择器就会起作用,并且应用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中的+号选择器可以很方便的选择指定元素的下一个兄弟元素,为我们的样式设置带来便利。