CSS如何选中相邻兄弟无指定类的元素？滑块边距调整问题

问题原因 #

CSS规范中:not()伪类仅支持传入简单选择器（类、ID、属性、单伪类等），不支持包含+、~等关系选择符的复杂选择器，因此你尝试的写法不符合语法规则，无法生效。

可行实现方案 #

方案1：仅需适配前向按钮禁用场景（相邻兄弟选择器实现，无额外JS）

如果只需要根据.content前面的前向按钮状态调整左边距，可以直接用相邻兄弟选择器反向实现：

1. 先给.content设置默认左边距，对应前向按钮正常可用的状态

.content {
  margin-left: 50px;
  /* 其他原有样式 */
}

2. 前向按钮禁用时，通过相邻选择器选中后续的.content，覆盖取消左边距即可

/* 假设前向按钮的类名为.prev-btn */
.prev-btn.button-disabled + .content {
  margin-left: 0;
}

方案2：前后按钮都需适配（父容器加类，兼容性最好）

由于旧版CSS没有前置兄弟选择器，无法通过后面的后向按钮状态选中前面的.content，这种情况直接把按钮禁用状态同步到父容器加类即可，兼容所有旧浏览器：

1. 逻辑层控制父容器类名：
   • 前向按钮禁用时，给父容器加prev-disabled类
   • 后向按钮禁用时，给父容器加next-disabled类
2. 对应CSS写法：

/* 默认两个按钮都可用时的边距 */
.content {
  margin-left: 50px;
  margin-right: 50px;
}
/* 前向按钮禁用时取消左外边距 */
.prev-disabled .content {
  margin-left: 0;
}
/* 后向按钮禁用时取消右外边距 */
.next-disabled .content {
  margin-right: 0;
}

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