优先考虑CSS类？

Question

我正在使用Twitter的Bootstrap库2.0.3版来构建网站原型。我目前正在使用提供的模态控件（尽管是内联的）来显示将是一个表单：

<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的宽度和宽度x 460像素。

我有什么方法可以做到这一点？

Answer 1

有三种方法可以使规则覆盖另一种规则（列出最强到最弱）：

1. 重要性，例如作者样式表中的规则将覆盖用户代理样式表中指定的规则，使用!important规则将覆盖任何其他规则。
2. 特异性，规则将覆盖具有较少特定选择器的任何其他规则。 Here's an article on the subject. 基本上，element.class比.class更具体，但具体程度低于#id。
3. 订单，规则将覆盖之前的任何其他规则。

除此之外，我发现你的代码存在一些其他问题。在设计网站时，最好使用语义定义（“这意味着什么”）而不是形成相关的术语（“应该看起来如何”）。

要具体引用您的代码，请为您的类名span6，in-layout和offest3命名，其中您可能应该使用warning-modal，{{1} }或information-header，它传达了元素的含义（毕竟HTML的唯一目的是为您的文本提供上下文）。

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

Answer 2

只需将它们放在.modal规则之后，或在.span6中重复.offset3和div.modal.in-layout所需的规则。