CSS - 原始与自定义样式表 - 覆盖样式的正确方法

Posted 2023-02-24

【中文标题】CSS - 原始与自定义样式表 - 覆盖样式的正确方法

【英文标题】：CSS - original vs. custom style sheet - correct way to overwrite styles

【发布时间】：2015-05-04 23:05:11

【问题描述】：

我正在使用一个 wordpress 主题，它使用自己的按钮样式。以下几行是 CSS 的一部分：

.button 
background: #333 !important;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222))  !important;
background: -moz-linear-gradient(0% 0% 270deg,#333, #222) !important;

我正在使用自己的自定义样式表，我想覆盖这些样式，但我需要做的就是更改背景颜色并移除渐变。

如果我只保持线条改变样式表中的背景颜色，如下所示：

.button 
background: #353535 !important;

那么渐变仍在显示，因为它在原始样式表中。

如果我将渐变线设置为background: none;，那么它将影响我更改颜色的第一行，因此不会显示任何内容。

所以我已经这样做了：

.button 
    background: #353535 !important;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#))  !important;
    background: -moz-linear-gradient(0% 0% 270deg,#, #) !important;
    

我删除了渐变色。

它有效，但这可能不是这样做的方法。

是否有适当的方法来删除自定义 css 样式表中的渐变样式？

【问题讨论】：

"那么渐变仍在显示，因为它在原始样式表中" 这不应该发生，除非在您的自定义样式表之后加载原始样式表。

我现在已将其从自定义样式表中删除，并且似乎一切正常。嗯，不确定，之前一定是做错了什么。感谢您指出。

【参考方案1】：

从 html/CSS 的角度来看：渐变不是颜色而是图像。

因此只需删除背景图像。

background-image: none;