1

我正在使用 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 的宽度。

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

4

2 回答 2

9

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

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

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

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

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

于 2012-05-11T19:52:01.093 回答
0

只需将它们放在.modal规则之后.span6或.offset3在div.modal.in-layout.

于 2012-05-11T19:51:37.757 回答