1

TwitterのBootstrapライブラリバージョン2.0.3を使用して、Webサイトのプロトタイプを作成しています。私は現在、提供されているモーダルコントロールをインラインではありますが、フォームを表示するために使用しています。

<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ルールが非常に不便な順序で一致することです。

ここに画像の説明を入力してください

基本的に、260pxのマージンと460pxの幅を与えるためよりも高い優先度で適用するクラス.span6とクラスが必要です。.offset3.modal<div>

これを行う方法はありますか？

4

2 に答える 2

9

ルールを別のルールにオーバーライドさせる方法は3つあります（最も強いものから最も弱いものへとリストされています）。

  1. 重要性。たとえば、作成者スタイルシートのルールは、ユーザーエージェントスタイルシートで指定されたルールをオーバーライドします。ルールを使用!importantすると、他のルールがオーバーライドされます。
  2. 特異性、ルールは、特定性の低いセレクターを持つ他のルールをオーバーライドします。これがこのテーマに関する記事です。基本的に、element.classはより具体的ですが、より具体的では.classありません#id。
  3. 順序、ルールは、その前にあった他のルールを上書きします。

それとは別に、私はあなたのコードに関する他のいくつかの問題を見つけています。Webサイトを設計するときは、関連する用語（「これがどのように見えるか」）を形成するのではなく、セマンティクス定義（「これが何を意味するか」）を使用するのが最善です。

コードを具体的に参照するには、クラス名span6に名前を付けます。ここで、要素の意味を伝える、、、in-layoutなどの名前offest3を付ける必要があります（HTMLの唯一の目的は、テキストにコンテキストを与えることです）。warning-modalinformation-headererror-footer

これらの用語で考えると、要素のスタイルを設計するのがはるかに簡単になります。

于 2012-05-11T19:52:01.093 に答える
0

それらを.modalルールの後に置くか、必要なルールをから.span6繰り返し.offset3ますdiv.modal.in-layout。

于 2012-05-11T19:51:37.757 に答える