Question

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

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

使用!important：

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

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

不必要的筑巢：

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

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

还是其他一些方法？

“最好的”我的意思是： *符合CSS最佳实践 *表现良好

Answer 1

请勿使用!important，除非您没有其他选择。

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

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

您不必进行任何嵌套。只需使用id而不是class，并在其前面添加标记名称，如上面的代码所示。

以下是jsFiddle

的示例

Answer 2

为了提高性能，请为所有css使用内联样式。这是谷歌邮件（Gmail）中使用的技术，我认为雅虎！邮件也是。所以，如果它是你想要的速度。为所有内容使用内联样式。老实说，我不会去那条路，因为它不提供干净且可重复使用的代码。

所以我会选择最干净的解决方案，它给元素一个类名，避免使用！important。它肯定是不受欢迎的，它不必被用来说实话。该表将尊重表元素上的类名。这提供了一个更干净的CSS，最终适用于所有浏览器。如果要覆盖General中的类，则意味着您可能需要重新考虑CSS的体系结构。我并不是说你的做法是错误的，但我们谈论的最好的做事方式不是我们吗？：）

快乐的编码！

Answer 3

就个人而言，我使用!important来代表“覆盖”类。比如：

.center {text-align:center !important}
.right {text-align:right !important}

依此类推 - 如果我在元素上指定class="right"，那是因为我特别想让它正确对齐，!important有助于反映这一点。

但是在更一般的情况下，您应该避免!important - 主要是因为一旦您使用!important，就无法再覆盖它了！

Answer 4

你应该这样做：

.tableAll td{
padding: 5px;
text-align: center;
}

而你只是想集中，为什么要定义类。在这种情况下，内联样式将起作用，并将覆盖.tableAll的匹配样式。

<table class="tableAll">
 <tr>
    <td style="text-align: center;"></td>
    <td >other all</td>
 </tr>
</table>

我不推荐使用!important。

Answer 5

实际上，使用!important和嵌套

都可以解决这两个问题

你不应该经常使用!important，因为一旦它传播并且你一遍又一遍地使用它，你将会回到开头（难以指定特定于覆盖其他样式的元素，应用），但在这种特殊情况下，你很好，因为!important规则只影响1个元素。

嵌套也很有效，只要你将它用于特殊情况而不是每一个元素，因为一旦你这样做，你的代码将是不可读的，你将很难改进和重新分解。 / p>

Answer 6

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

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

可以说，您不需要#my-table选择器，因为您声明要将所有 td元素与中心对齐。

更可重复使用的方法是删除id并且只有：

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

然后，您可以将对齐应用于任何位置的td，并在需要时稍后通过向表中添加id来覆盖。

Answer 7

我不建议使用!important。在您使用text-align: center的情况下，您可以将文本居中，如果您想要任何列文本应该是left-align，您可以为column制作特定的类，或者更好地使用某些高级CSS3。

在此示例中，我想更改Last Column的{{1}}，并希望应用类。

我可以通过添加此样式来实现此目的。

Last row

或者更好地检查这个例子。 http://jsbin.com/mizotofe/1/

CSS - 基本特异性

7 个答案: