css相邻子元素 |css3仿windows网站导航菜单

例如，大家有一个HTML结构如下：
<ul>
<li>苹果</li>
<li>橙子</li>
<li>香蕉</li>
<li>柚子</li>
</ul>
大家想要将橙子和香蕉这两个元素的文字颜色变成红色，可以使用相邻子元素选择器来实现，代码如下：
ul li + li {
color: red;
}
在这个例子中，大家选择了所有在同一父元素下的li元素，但是大家只对第二个和第三个li元素应用样式。这是由于大家使用“+”相邻子元素选择器，表示选择在其前面有一个兄弟元素的元素。因此，大家只对第二个和第三个li元素应用样式，因为它们都有一个前面的兄弟元素。

相邻子元素选择器在许多情况下都很有用，例如在制作导航菜单时，可以使用此选择器为当前页面链接的前一项和后一项应用样式。