html - 覆盖文本对齐属性

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 规则，您有多种方法可以做到：

• 通过设置具有更高特异性的规则

  表 td.align-left { text-align:left }
  vs
  td { text-align:left }

• 通过在样式表中设置具有相同级别特异性的规则

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

• 通过设置!important

  表 td { text-align:left !important }

Answer 2

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

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

Answer 3

您是要同时覆盖tableand.align_left样式，还是.align_left您已经尝试过？该类应覆盖元素：

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