如何在CSS中覆盖outline: none属性？父类设置该属性后子类无需生效

outline 属性本身不继承，但如果父元素设置了outline: none，而你需要子类恢复或自定义轮廓样式，直接给子类设置 outline 属性即可，以下是几种常用方案：

• 恢复浏览器默认轮廓样式
  如果想让子类回到浏览器原生的聚焦轮廓（比如键盘导航时的提示），可以用 outline: revert;，它会重置属性到浏览器的默认值：

  .parent {
    outline: none;
  }
  .child {
    outline: revert;
  }
  

• 自定义轮廓样式
  直接给子类指定具体的轮廓参数，比如样式、颜色、宽度，按需调整：

  .parent {
    outline: none;
  }
  .child {
    outline: 2px solid #007bff; /* 自定义轮廓的宽度、样式、颜色 */
    outline-offset: 3px; /* 可选：设置轮廓与元素边缘的间距 */
  }
  

• 处理父类的!important强制优先级
  如果父类用了!important锁定outline: none，子类需要同样用!important来覆盖（尽量少用，但必要时可行）：

  .parent {
    outline: none !important;
  }
  .child {
    outline: 1px dashed #dc3545 !important;
  }
  

注意：outline 主要用于可访问性提示（比如键盘聚焦状态），除非有自定义的聚焦样式方案，否则不建议完全去掉子类的轮廓，避免影响键盘用户的操作体验。

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