优先考虑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的宽度和460px的宽度.

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

Answer 1

有三种方法可以使规则覆盖另一种规则(列出最强到最弱):

1. 重要性,例如作者样式表中的规则将覆盖用户代理样式表中指定的!important规则,使用规则将覆盖任何其他规则.
2. 特异性,规则将覆盖具有较少特定选择器的任何其他规则.这是一篇关于这个主题的文章.基本上,element.class比具体而言.class,更具体#id.
3. 订单,规则将覆盖之前的任何其他规则.

除此之外,我发现你的代码还有其他一些问题.在设计网站时,最好使用语义定义("这意味着什么"),而不是形成相关的术语("应该如何看").

具体来说,引用你的代码,命名你的类名span6,in-layout并且offest3,你应该有类似的东西warning-modal,information-header或者error-footer传达元素含义的东西(毕竟HTML的唯一目的是为你的文本提供上下文).

一旦你想到这些术语,为你的元素设计样式会容易得多.