如何在不使用!important和内联样式的情况下覆盖表格边框类？

问题分析 #

当前代码中，表格添加T R B L类后，所有单元格会被.T>tbody>tr>td这类选择器命中，这些选择器的优先级高于td.none或td.TBL这类单独的单元格类——前者选择器权重（类选择器+4个元素选择器）高于后者（类选择器+1个元素选择器），导致自定义边框样式无法生效。

可行方案 #

方案1：提升目标单元格选择器的优先级 #

通过增加选择器特异性，让自定义边框类的优先级超过表格全局边框类的优先级：

table {
  border-collapse: collapse;
}

/* 原全局边框类 */
.T>tbody>tr>td,
td.T {
  border-top-style: solid;
}

.R>tbody>tr>td,
td.R {
  border-right-style: solid;
}

.B>tbody>tr>td,
td.B {
  border-bottom-style: solid;
}

.L>tbody>tr>td,
td.L {
  border-left-style: solid;
}

/* 高优先级自定义样式 */
table.T.R.B.L tr:first-child td.none {
  border-style: none;
}

table.T.R.B.L tr:first-child td.TBL {
  border-style: solid none solid solid;
}

table.T.R.B.L tr:first-child td.TRB {
  border-style: solid solid solid none;
}

对应的HTML调整：

<table class="T R B L">
  <tr>
    <td class="none">1</td>
    <td class="TBL">2</td>
    <td class="TRB">3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

方案2：调整边框类的应用范围 #

不为整个表格添加边框类，仅给需要边框的单元格单独添加，避免全局样式干扰：

table {
  border-collapse: collapse;
}

/* 仅保留单元格级边框类 */
td.T { border-top-style: solid; }
td.R { border-right-style: solid; }
td.B { border-bottom-style: solid; }
td.L { border-left-style: solid; }
td.none { border-style: none; }
td.TBL { border-style: solid none solid solid; }
td.TRB { border-style: solid solid solid none; }

对应的HTML调整：

<table>
  <tr>
    <td class="none">1</td>
    <td class="TBL">2</td>
    <td class="TRB">3</td>
  </tr>
  <tr>
    <td class="T B L R">4</td>
    <td class="T B L R">5</td>
    <td class="T B L R">6</td>
  </tr>
</table>

方案3：使用CSS变量统一控制 #

通过CSS变量定义边框样式，在目标单元格中重置变量实现灵活控制，无需调整选择器优先级：

table {
  border-collapse: collapse;
  --border-top: solid;
  --border-right: solid;
  --border-bottom: solid;
  --border-left: solid;
}

table.T.R.B.L td {
  border-top-style: var(--border-top);
  border-right-style: var(--border-right);
  border-bottom-style: var(--border-bottom);
  border-left-style: var(--border-left);
}

td.none {
  --border-top: none;
  --border-right: none;
  --border-bottom: none;
  --border-left: none;
}

td.TBL {
  --border-right: none;
}

td.TRB {
  --border-left: none;
}

HTML保持原结构即可。

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