[分享]css兄弟结点选择器

CSS的兄弟结点选择器允许我们将样式应用于文档中的兄弟元素，这些兄弟元素与选择器指定的元素有相同的父级元素。/ 使用兄弟结点选择器将第二个段落的颜色设置为红色 / p + p { color: red...

CSS的兄弟结点选择器允许我们将样式应用于文档中的兄弟元素，这些兄弟元素与选择器指定的元素有相同的父级元素。

/* 使用兄弟结点选择器将第二个段落的颜色设置为红色 */
p + p {
  color: red;
} 

在上述示例中，我们使用了“+”符号来指定相邻的兄弟元素。因此，这个选择器在第一个段落之后找到了相邻的第二个段落，将其颜色设置为红色。

/* 使用兄弟结点选择器将所有h2元素的颜色设置为红色，除了第一个h2元素 */
h2 ~ h2 {
  color: red;
} 

在这个示例中，我们使用了“~”符号来指定所有后续兄弟元素，而不仅仅是相邻的兄弟元素。因此，所有的h2元素都将被选中并设置为红色，除了第一个h2元素。

兄弟结点选择器可以用于很多场景，例如：

• 为表格的奇数或偶数行设置不同的背景颜色
• 为菜单或导航栏中当前选中的标签添加样式
• 为一组表单元素中的某个元素添加样式

总的来说，CSS的兄弟结点选择器是一种非常有用的选择器，它使我们能够轻松地应用样式到文档中的兄弟元素，而无需为每个元素都编写一个单独的样式规则。