将表属性的css与另一个重叠

Question

我正在开发一个网页，其中包含一个包含多个列的表，如下所示

在上面的图片中，每个td都有蓝色边框但我正在尝试使用以下标记和CSS增加Ask1左边框的厚度

HTML

 <td class="clientOffer1">Ask1</td>

CSS

clientOffer1 {
 border-left: 3px solid #0088cc;

}

但是上面的CSS被替换为td的原始css，用于剩余的列，如下所示

td {
    padding: 1px;
    line-height: 10px;
    text-align: center;
    /*background-color:#3C78B5;*/
    vertical-align: auto;
    border: 1px solid #0088cc;
    width: 120px; 

}

如何在不相互冲突的情况下使用两个CSS？

Answer 1

在CSS中使用前导句点选择类：

.clientOffer1 { ... }

DEMO

td {
    padding: 1px;
    line-height: 10px;
    text-align: center;
    /*background-color:#3C78B5;*/
    vertical-align: auto;
    border: 1px solid #0088cc;
    width: 120px; 
}

.clientOffer1 {
    border-left: 3px solid #0088cc;
}

如果您仍然遇到麻烦，那将是因为某种程度的特异性正在持续。请尝试以下方法：

.client {
  border-left: 3px solid #0088cc !important;
}

这里有一些阅读材料：

• Specificity