html - 表属性与另一个重叠的 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;
}

这里有一些阅读 Material :

• > Specificity