如何阻止指定按钮继承父元素的disabled隐藏样式？

因为原样式通过.accidentReportingSection [disabled]选择器隐藏了所有禁用元素，而你无法修改这个样式文件，只能通过提高自定义样式的选择器优先级来覆盖它，以下是几种可行方案：

• 用更具体的选择器精准定位目标按钮：
  直接写比原选择器更具体的规则，比如：

  .accidentReportingSection .reportAccident[disabled] {
    display: inline-block; /* 改成按钮原本的display值，比如inline/block都可以，根据实际情况调整 */
    opacity: 0.6; /* 置灰效果 */
    cursor: not-allowed; /* 鼠标提示不可点击 */
    /* 也可以直接用原生禁用样式的颜色，比如：
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #adb5bd;
    */
  }
  

  这个选择器的优先级比原样式高，会直接覆盖display: none的规则，同时保留按钮的禁用状态。

• 若上述选择器优先级还是不够，可临时使用!important（尽量少用，仅在万不得已时）：

  .reportAccident[disabled] {
    display: inline-block !important;
    opacity: 0.6;
    cursor: not-allowed;
  }
  

• 额外提醒：确保你的按钮始终保留disabled属性，这样既可以维持原生的不可交互状态，又能通过自定义样式实现置灰效果，不会出现视觉和功能不一致的问题。

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