如何为添加active类的<nav>同级<button>编写CSS样式？

要给带有active类的<nav>同级的下方<button>设置样式，用CSS的兄弟选择器就能实现，分两种情况处理：

• 如果button是nav的直接下一个同级元素（匹配你提供的HTML结构），用相邻兄弟选择器（+）最精准：

nav.active + .mobile-button {
  /* 示例样式，可按需修改 */
  background: #2196F3;
  color: #fff;
  border-radius: 4px;
  padding: 0.5rem 1rem;
}

这个选择器只会选中紧跟在nav.active之后的第一个.mobile-button，不会影响其他位置的同级元素。

• 如果button和nav是同级但不直接相邻，就用通用兄弟选择器（~），它会选中nav.active之后所有同级的.mobile-button：

nav.active ~ .mobile-button {
  /* 自定义样式 */
}

内容的提问来源于stack exchange，提问作者AtahanCH