css3兄弟节点选择器 |html5-css3按钮特效

兄弟节点选择器可以通过指定一个元素的同级兄弟元素的类型、id、class、属性等信息，来选取与该元素相邻的兄弟元素。在 CSS3 中，兄弟节点选择器使用“~”符号来表示。

/* 选取所有 div 元素的相邻兄弟元素 */
div ~ div {
/* CSS 样式 */
}

上例中，CSS 将更改所有 div 元素的相邻兄弟元素的样式。

兄弟节点选择器还可以通过组合使用其他选择器来实现更灵活的选择效果。例如，可以使用类选择器和兄弟节点选择器组合来选取同级的带有特定类名的元素：

/*选取所有带有 class 为 "example" 的 p 元素后面相邻的 h2 元素*/
p.example ~ h2 {
/* CSS 样式 */
}

上例中，CSS 将更改所有带有 class 为 “example” 的 p 元素后面相邻的 h2 元素的样式。

总之，兄弟节点选择器是一种强大的 CSS 选择器，可以帮助大家轻松地选取相邻的兄弟元素，并与其他选择器组合使用来实现更灵活的 CSS 样式效果。