覆盖text-align属性

Question

我想在代码中覆盖text-align属性。我有这个HTML代码：

<style>
    table { text-align: center; }
    .align_left { text-align: left; }
</style>
<table>
    <tr>
        <td class="align_left">Align left ?</td>
        <td>Align center ?</td>
    </tr>
</table>

这样做的最佳方式是什么？

Answer 1

我认为您不必覆盖您提供给我们的代码示例中的任何内容。看起来很不错。

但是，如果您需要覆盖CSS规则，则有多种方法可以执行此操作：

• 通过设置较高specificity

  的规则

  table td.align-left {text-align：left}
  vs
  td {text-align：left}

• 通过设置具有相同特异性级别但稍后在样式表

  中的规则

  table td {text-align：left}
  table td {text-align：center} / *此行覆盖上面的一行* /

• 设置!important

  table td {text-align：left！important}

Answer 2

td {text-align:center;}
td.align_left { text-align:left;}

如果您只定位现代浏览器，您还可以使用：first-of-type来定位第一个td。

Answer 3

您是要覆盖table和.align_left样式，还是.align_left您尝试过的内容？该类应覆盖元素：

table td { text-align:center; }
table td.align_left { text-align:right; }