Question

我有2个文件theme.css和main.css

theme.css

.table td {
           border-top: 1px solid #e8edf1;
           vertical-align: top;
           padding: 5px 5px !important;
           color: #576475;
           font-size: 11px;
}

的main.css

.table td {
            padding: 1px 2px;
 }

我想通过在td之后添加main.css来覆盖main.css的{{1}}属性。

但最终输出的属性为theme.css。

PS：我想只覆盖填充属性。

Answer 1

由于第一个CSS规则已应用!important，因此覆盖它的唯一方法是使用另一个!important规则：

.table td {
    padding: 1px 2px !important;
}

如果可以，请从所有CSS中删除!important关键字。有更好的方法来定义订单。

Answer 2

就具体情况而言，!important每次都会获胜。

您应该避免使用!important并使用特定优势。订购CSS文件是一种方法，订购规则是另一种方式。

有关特异性的更多信息：CSS-Tricks

因此，在您的情况下，您应该从!important文件中删除theme.css标记，这样就可以解决它。

Answer 3

@Abhishek请根据您的要求，使用两个不同表格的示例检查以下代码。

＆＃13;

table td {
           border-top: 1px solid #e8edf1;
           vertical-align: top;
           padding: 5px 5px !important;
           color: #576475;
           font-size: 11px;
}

table.custom_table td{
  padding: 1px 2px !important;
 }

＆＃13;

<table>
        <tr>  
            <td>fdhf</td>
             <td>dfdfdf</td>
          </tr>
              
  
</table>
<table class="custom_table">
        <tr>  
            <td>fdhf</td>
             <td>dfdfdf</td>
          </tr>
              
  
</table>

＆＃13;

覆盖CSS属性

3 个答案: