CSS兄弟元素选择器（Sibling Selector）是CSS中的一种选择器，它可以匹配两个元素之间的兄弟关系，从而实现一些常见的样式效果。
兄弟选择器 + 可以匹配当前元素的下一个元素，语法格式如下：
E + F {
/* 样式定义 */
}
其中 E 是当前元素，F 是 E 的下一个元素，例如：
p + p {
color: red;
}
上面的代码表示，所有 p 元素的下一个 p 元素的文字颜色为红色。
兄弟选择器 ~ 可以匹配当前元素之后的所有元素，语法格式如下：
E ~ F {
/* 样式定义 */
}
其中 E 是当前元素，F 是 E 之后的所有元素，例如：
p ~ p {
color: red;
}
上面的代码表示，当前 p 元素之后的所有 p 元素的文字颜色为红色。
li:hover + li {
color: red;
}
上面的代码表示，当鼠标移入 li 元素时，它的下一个 li 元素的文字颜色为红色。
li:nth-child(odd) {
background-color: #ccc;
}
li:nth-child(even) {
background-color: #eee;
}
上面的代码表示，列表中奇数行的背景颜色为 #ccc，偶数行的背景颜色为 #eee。
CSS兄弟元素选择器（Sibling Selector）可以用来实现鼠标移入移出时改变元素样式的效果，也可以用来实现列表的奇偶行颜色不同的效果。它的使用方法也非常简单，只需要熟悉其语法格式，即可轻松使用。
本文链接：http://task.lmcjl.com/news/12827.html