咨询：CSS按钮颜色无法被父元素覆盖的原因及解决办法

为什么按钮文本没变红？ #

浏览器会给<button>这类原生表单元素设置内置默认样式，其中就包含color属性。这个默认样式是直接作用在按钮元素上的，而父元素的color样式是通过继承传递给按钮的，继承样式的优先级远低于元素自身的直接样式——哪怕你给父元素加了!important也没用，因为!important只能提升当前选择器的权重，无法改变继承样式的优先级规则。

让父元素颜色覆盖按钮的几种方法 #

• 方法一：直接选中按钮设置样式
  直接用选择器定位到按钮，给它设置颜色，这样优先级足够覆盖浏览器默认样式：

  .red button {
    color: red;
  }
  

  HTML代码保持不变：

  <div class="red">
    <button>应为红色</button>
  </div>
  

• 方法二：强制按钮继承父元素颜色
  给按钮设置color: inherit，强制它继承父元素的颜色，如果父元素用了!important，也可以给inherit加上!important确保生效：

  .red {
    color: red !important;
  }
  .red button {
    color: inherit !important;
  }
  

• 方法三：重置按钮所有默认样式
  用all: unset清除按钮的所有内置默认样式，再重新设置颜色和需要的按钮样式（注意这会清除边框、背景等所有默认样式，需要自行补全）：

  .red button {
    all: unset;
    color: red;
    /* 可选：补回按钮基础样式 */
    border: 1px solid #ccc;
    padding: 4px 8px;
    cursor: pointer;
  }
  

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