为何disabled状态下图标按钮的背景色无法修改？

你的问题出在两个核心点上：

• 你用了:disabled伪类，但<div>不是原生支持禁用状态的表单控件（这个伪类仅对<button>、<input>这类可交互表单元素生效），所以样式不会起作用。
• CSS选择器的空格写错了，.left-arrow :disabled是选中.left-arrow的后代元素中的禁用元素，而非.left-arrow自身。

方案一：基于现有div结构修改CSS #

直接针对JS添加的disabled类写样式，注意选择器不要加空格：

/* 选中同时拥有left-arrow和disabled类的元素 */
.left-arrow.disabled {
  background-color: grey;
  cursor: not-allowed; /* 配合禁用状态修改光标，提升交互体验 */
  opacity: 0.7; /* 可选：添加透明度让禁用状态更直观 */
  transition: all 0.2s ease; /* 可选：状态切换时添加平滑过渡 */
}

.left-arrow {
  width: 36px;
  height: 36px;
  background-color: #ACBBD1;
  border-radius: 60px;
  color: white;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

方案二：改用语义化的button标签（推荐） #

把箭头容器改成<button>标签，它原生支持disabled属性，既可以用:disabled伪类控制样式，也更符合HTML语义规范：

修改后的HTML： #

<button class="left-arrow" id="left-arrow-rtl">
  <div class="arrow">
    <i class="fas fa-arrow-left"></i>
  </div>
</button>

对应的CSS： #

.left-arrow:disabled {
  background-color: grey;
  cursor: not-allowed;
  opacity: 0.7;
}

.left-arrow {
  width: 36px;
  height: 36px;
  background-color: #ACBBD1;
  border-radius: 60px;
  color: white;
  position: relative;
  cursor: pointer;
  border: none; /* 去掉button默认边框 */
  padding: 0; /* 去掉button默认内边距 */
  transition: all 0.2s ease;
}

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