32

スタイルクラスをスペースで区切るのはいつですか? たとえば、次の 2 つの CSS ブロックの違いは何ですか?

ブロック 1 :

div {
    color: brown;
}

div.special {
    font-size: 18px;
}

ブロック 2 :

div {
    color: brown;
}

div .special {
    font-size: 18px;
}

これはHTMLです：

<div class="special">The quick brown fox jumps over the lazy dog.</div>

両方のバージョンを試しました。ブロック 1 の場合のみ、テキストはフォント サイズ 18 になります。

4

5 に答える 5

57

子孫要素を参照する場合はクラスをスペースで区切り、複数のクラスを持つ単一の要素を参照する場合はそれらを連結します。

たとえば、2 つのクラスを持つ div を参照するには、次のように<div class="foo bar">使用できます。

div.foo.bar {...}

子スパン要素を参照するには、<div class="foo"><span class="bar">stuff</span></div>次を使用できます。

div.foo .bar {...}
于 2013-05-31T13:53:58.637 に答える
31

スペースはネストを示します。

div .foo /* .foo is inside div */

スペースがない場合は、さらなる具体性を示します。

div.foo /* any div that is also .foo */
于 2013-05-31T13:54:34.633 に答える
7

div.specialを指す

<div class="special"> <- this

div .specialを指す

<div>
    <p class="special"> <-  this
</div>

必ずしもpBTWではない

于 2013-05-31T13:54:39.273 に答える
3

このスペースは、これが子アイテムであることを示しています。

IE

div.special

specialwhileクラスを持つ div をターゲットにします

div .special

special要素内のクラスを持つdiv要素をターゲットにします

于 2013-05-31T13:54:30.070 に答える
1

div.specialdivクラスを持つ要素を選択し、クラスを持つ.special他の要素を選択しない.specialため、次のようなもの<ul class="special">がある場合は除外されます。これにより、内部にネストされているdiv .specialクラスを持つすべての要素が選択されるため、これが選択されるため、最初の1 つは 2 番目よりも厳しい.specialdiv<ul class="special">

したがって、あなたの場合、単に使用する.specialか、使用することができますdiv.special

于 2013-05-31T13:54:41.447 に答える