CSS 优先级：为什么内联样式被覆盖

在 CSS 中，样式根据其规则的优先级应用于元素。当多个规则针对同一元素时，优先级最高的规则将生效。

在提供的示例中，您有一个内联样式，为右列表格中的 td 元素设置 padding-left: 10px ID。但是，引用样式表中的样式将 .rightColumn 类中的所有元素的边距和填充设置为 0。问题是引用样式表中的样式具有更高的优先级，导致内联样式被覆盖。

计算特异性

CSS 优先级由规则。特异性根据以下标准计算：

1. 内联样式声明为特异性贡献 1 分 (a = 1)。
2. 选择器中的每个 ID 贡献 10 分 (b = n ).
3. 选择器中的每个类或伪类贡献 1 分 (c = n)。
4. 选择器中的每个元素或伪元素贡献 1 分 (d = n)。

例如，带有选择器 .rightColumn * 的规则的特异性为 0010 (a = 0, b = 0, c = 1, d = 0)，而带有选择器 td 的规则特异性为 0001（a = 0、b = 0、c = 0、d = 1）。由于 0010 大于 0001，因此引用的样式表中的规则具有更高的优先级。

解决问题

要解决此问题并应用内联样式，您可以两个选项：

1. 使用 !important: 您可以将 !important 添加到内联样式以强制其更高的重要性。然而，这种方法可能很难维护，如果可能的话应该避免。
2. 增加规则特异性：您可以向内联样式添加更具体的选择器以增加其特异性。例如，您可以向表格单元格添加类名，并使用 .rightColumn .myUnpusedTable 等选择器设置它们的样式。这样，内联样式的特殊性变为 0011，这高于引用样式表中规则的特殊性 (0010)。