CSS - 基本特异性

Question

我有一个包含许多列的 HTML 表格。我想在除一列之外的所有列上设置 text-align: center。

我听说使用 !important 和不必要的嵌套都不受欢迎。实现这一目标的“最佳”方法是什么？

1. 使用 !important:

#my-table td {
    padding: 5px;
    text-align: center;
}

.my-table-special-td {
    text-align: left !important;
}

1. 不必要的嵌套:

#my-table td {
    padding: 5px;
    text-align: center;
}

#my-table .my-table-special-td {
    text-align: left;
}

还是其他一些方法？

我所说的“最佳”是指: * 符合 CSS 最佳实践 * 性能良好

Answer 1

为了提高性能，请为所有 CSS 使用内联样式。这是谷歌邮件 (Gmail) 中使用的技术，我认为 Yahoo!邮件也是如此。所以如果它是你想要的速度。对所有内容使用内联样式。老实说，我不会走那条路，因为它不提供干净且可重用的代码。

所以我会选择最简洁的解决方案，即为元素提供类名并避免使用 !important。这绝对是不受欢迎的，而且不必老实说。该表将在您的表元素上尊重您的类名。这最终提供了适用于所有浏览器的更简洁的 CSS。如果您在一般情况下重写类，则意味着您可能需要重新考虑 CSS 的架构。我并不是说你做错了，但我们正在谈论最好的做事方式，不是吗？ :)

编码愉快!