css3 选择器相邻

CSS3 选择器中，相邻选择器是一种基于元素在 HTML 结构中相邻位置进行选择的一种选择器。相邻选择器使用 "+" 符号来表示，它可以选中某个元素后面第一个相邻的元素。

/* 用相邻选择器选中紧接在h1元素后面的第一个p元素 */
h1 + p {
  color: red;
}

在上面的代码中，我们使用相邻选择器选中了紧接在 h1 元素后面的第一个 p 元素，并将它的颜色设置为红色。需要注意的是，如果 h1 后面没有 p 元素，这个选择器就不会起作用。

相邻选择器可以用于很多场景，比如在列表中，如果希望选中每个 li 元素后面的第一个 span 元素，就可以使用相邻选择器：

/* 用相邻选择器选中每个li元素后面的第一个span元素 */
li + span {
  font-weight: bold;
}

在上面的代码中，我们使用相邻选择器选中了每个 li 元素后面的第一个 span 元素，并将它的字体加粗。这样就可以让每个列表项的第一个 span 元素看起来更加醒目了。

相邻选择器是 CSS3 中非常实用的一种选择器，可以帮助我们快速地选中相邻的元素，在处理一些特定的布局时非常方便。