0

これで言いたいのは、2 つの div を含むページがあり、各 div に個別のスタイルを持たせたい場合、どのようにすればよいでしょうか?

例：

div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.

各 div にクラスを追加するだけでよいことはわかっていますが、それを拡張するとどうなるでしょうか? 多くの異なる属性を持つページのセクション全体でスタイルシートの一部を使用し、別のセクション全体で別の部分を使用したい場合はどうすればよいですか?

4

3 に答える 3

3

CSS ルールの前にセクションの ID またはクラスを付けるだけです。例えば：

#section1 h1 {
    color: red;
}

#section2 h1 {
    color: blue;
}

基本的に、すべてのルールの前に、含まれているセクションに応じて#section1またはのいずれかを付けます。#section2

于 2013-01-14T08:52:44.780 に答える
2

私が理解している限り、たとえば、ヘッダーのすべての div を緑にし、フッターのすべての div を赤にする必要があります。

#header div{ background-color: green; }

そしてより

<div id="header">
    <div>I'm green</div>
</div>

特殊なケースを解決するために、より複雑なセレクターを使用することもできます。次の例を見てください。

#header div{ background-color: red; }
#header > div{ background-color: green; }

そしてより

<div id="header">
    <div>
        I'm green...
        <div>...and I'm red</div>
    </div>
</div>

Microsoft は、利用可能なセレクターの優れた概要を提供しています。例は時々少し弱いですが、それは何かです。

于 2013-01-14T08:55:46.527 に答える
1

あなたはこれを行うことができます：

.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div. 
.secondSectionType span {color: red; }

次に、HTML が次のようになっている場合:

<div class="firstSectionType">
    <p><span>Hello</span></p>
    <div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
    <p><span>Hello</span></p>
    <div>This has a blue background and <span>this is red text</span></div>
</div>

対応するセクションのdivおよびspanは、それに応じてフォーマットされます。

上記の CSS では、各ルールで.firstSectionTypeorを繰り返す必要がありますが、 LESS.secondSectionTypeのような CSS プリプロセッサを使用すると、次のように書き換えることができます。

.firstSectionType
{
    div{ background: red;} // apply this style to one div.
    span { color: blue; }
}
.secondSectionType 
{
    div{ background: blue;} //apply this style to another div. 
    span {color: red; }
}
于 2013-01-14T08:56:50.280 に答える