html - 优先考虑 CSS 类？

Question

我正在使用 Twitter 的 Bootstrap 库 2.0.3 版来制作网站原型(prototype)。我目前正在使用提供的模态控件(尽管是内联的)来显示表单:

<div class="modal in-layout span6 offset3">
    <div class="modal-header">
        <h3>Header</h3>
    </div>
    <div class="modal-body">
        <p>Hello</p>
    </div>
    <div class="modal-footer">

    </div>
</div>

我编写了自己的选择器来使用我的自定义类 .in-layout :

div.modal.in-layout {
    position: static;
    top: auto;
    left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

问题在于 CSS 规则的匹配顺序非常不方便:

本质上，我需要 .span6和 .offset3优先级高于 .modal 的类为了给我<div>边距为 260px，宽度为 460px。

有什么办法可以做到这一点吗？

Answer 1

有 3 种方法可以使规则覆盖另一个规则(从最强到最弱):

1. 重要性，例如作者样式表中的规则将覆盖用户代理样式表中指定的规则，使用 !important 规则将覆盖任何其他规则。
2. 特定性，规则将覆盖任何其他具有不太特定的选择器的规则。 <强> Here's an article on the subject. 基本上，element.class 比 .class 更具体，但不如 #id 具体。
3. 顺序，规则将覆盖之前的任何其他规则。

除此之外，我还发现了您的代码的其他一些问题。设计网站时，最好使用语义定义(“这意味着什么”)而不是形式相关术语(“这应该是什么样子”)。

要具体引用您的代码，正在命名您的类名 span6、in-layout 和 offest3，您可能应该在其中包含一些内容像 warning-modal、information-header 或 error-footer，它们传达元素的含义(毕竟 HTML 的唯一目的是提供上下文到您的文本)。

一旦您用这些术语思考，为您的元素设计样式就会容易得多。