如何让表格TR类样式优先于TD元素默认样式？

可以实现，但你当前的写法存在两个关键问题：一是直接给TR元素加边框无法影响TD的样式（表格边框默认作用在单元格上，TR的边框默认不显示）；二是important拼写错误，正确写法是!important（且尽量避免使用）。

正确的操作方式是通过后代选择器直接选中带有.tr类的TR下的TD元素，利用选择器优先级覆盖原TD样式，具体修改如下：

推荐写法（无需!important） #

td {
    border: 1px dotted #d6d6d6;
}

/* 优先级高于单纯的td选择器，直接覆盖底部边框样式 */
.tr td {
    border-bottom: 1px solid #ff0000;
}

若必须使用!important（不推荐） #

如果你因为特殊场景需要用!important，也要修正拼写并确保选中TD元素：

td {
    border: 1px dotted #d6d6d6;
}

.tr td {
    border-bottom: 1px solid #ff0000 !important;
}

原理说明 #

• 表格的边框样式默认作用于单元格（TD），直接给TR设置边框不会生效（除非修改表格的border-collapse属性为separate并设置border-spacing，但这不是常规需求）。
• .tr td的选择器优先级（类选择器 + 元素选择器）高于单纯的td元素选择器，因此无需!important就能覆盖原样式，这种方式更利于后续样式维护。

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