CSS：如何覆盖属性？

Question

我已经为表格定义了以下样式。

table tbody.center tr td {
    text-align: center;
}

它的目的是将具有tbody类等于'center'的表格单元格内容居中对齐。

仍然需要左对齐一些单元格，因此我希望有一个额外的样式。

table tbody tr td.left {
    text-align: left;
}

但是那并不完全符合我的需求：

<table>
    <tbody class="center">
        <tr>
            <td class="left">Should be left aligned, but is not</td>
            <td>Center aligned</td>
        </tr>
        <tr>
            <td>long text to stretch the table to be big enough to see the alignment</td>
            <td>long text to stretch the table to be big enough to see the alignment</td>
        </tr>
    </tbody>
</table>

在这个标记中，'td'对象的对齐方式实际上由'table tbody.center tr td'定义的样式决定。

为了解决这个问题，我需要引入一个额外的样式：

table tbody.center tr td.left 
{
    text-align: left;
}

但我不想为我的自定义样式每次介绍“left”。

有没有更有效地解决问题并指定样式优先级的方法？

谢谢。

- Budda

---

你当前的CSS对我来说很好：http://jsfiddle.net/d4uKb/ - MarcinJuraszek

但我不想为我的每个自定义引入“left”。你显然不是白痴。但我完全不明白你所说的获取额外优势的意思。必须有一些方法来区分自定义。 - King Friday

我想我的意思是请定义您想要自动覆盖的模式。如果这是您所询问的jQuery方式或CSS可能性，这将使其更清晰。 - King Friday

你当前的CSS对我也很好用！你是在哪个浏览器中检查的？你是否定义了文档类型？ - gurudeb

如果您的 .center 定义在 .left 定义之后，那么交换两者的位置可能会解决您的问题。 - Wex

Answer 1

如果可以避免，不要使用!important。这样会使将来覆盖该样式更加困难。

有许多关于CSS优先级的资源可供参考，但以下是一个快速回顾：

Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style

更具体的选择器将覆盖较不具体的选择器。尽量不要过度链式使用，否则可能会影响浏览器对页面布局的性能。

更新 不确定您整个解决方案的具体情况，但是您可以通过将id添加到表格和将.left添加到td来有效地覆盖单元格。

table tbody.center tr td {
    text-align: center;
}

#some_id td.left {
    text-align: left;
}


<table id="some_id">
    <tbody class="center">
        <tr>
            <td class="left">Should be left aligned, but is not</td>
            <td>Center aligned</td>
        </tr>
        <tr>
            <td>long text to stretch the table to be big enough to see the alignment</td>
            <td>long text to stretch the table to be big enough to see the alignment</td>
        </tr>
    </tbody>
</table>

祝你好运！

- ohiodoug

---

除了你提到的复习内容，你可能还想提供一个解决方案 - 尽管这是一个好建议。 - Wex

Answer 2

您只需要在属性声明的末尾，在分号之前添加!important即可。

这是由于CSS级联的原因，优先级被分配给您的选择器。在您的情况下，第一个选择器比第二个更具体，因此它具有更高的优先级并覆盖它。

在您的情况下，这两个选择器具有相同的特异性（0,0,1,4），因此后者获胜。如评论中所述，您可以将后面的规则移到前面（也许添加一个注释以便记住为什么该规则必须在其他规则之前，以避免再次出现问题）。

所有声明为important的属性都比normal的属性具有更高的优先级。有关更多详细信息，请查看规范：http://www.w3.org/TR/CSS21/cascade.html#cascade

- Carlo Cannas

---

除非确实需要，否则避免使用!important。CSS是层叠的，尝试利用这种行为。 - Raptor

同意 - 我几乎建议在这一点上只使用内联CSS。 - Wex

同Shivan达成一致...重要性优先于其他内容，但它并没有遵循适当的扩展方式...使用important告诉浏览器“先进行渲染，然后检查我的重要语法”...这不是一个好方法...这类似于在其他编程语言中使用“goto”...除非您能找出属性未获得优先权的根本原因，否则不要使用它。 - gurudeb

我不认为这种情况是滥用!important，因为我们正在指定它在具有类left（并且是th的后代等等）的td元素的text-align属性上。如果作者将类left赋予此特定元素，我认为他不需要覆盖它或拥有不同的对齐方式。 - Carlo Cannas

!important 存在是有原因的。不要害怕使用它，伙计们。 - Matías Cánepa