0

いくつかの調査を行っているときに、CSS ファイルに次のコードを見ました。

#element1{
overflow: hidden;     
width: 880px;
height: 32px;
padding: 5px 30px;
background: #c82c74;
border-bottom: 1px solid #870843;}

#element1 #element2{ 
float: left;
width: 400px;
padding-right: 25px;
margin: 0;
padding: 0;}

ご覧のように、element1 の ID には独自のプロパティと値のセットがあり、それが再び element2 と共に使用されます。対応する HTML ファイルでは、次のスタイルがどのように実装されているかを示します。

<div id="element1">
<div id="element2">
</div>
</div>

このコードは何を意味し、ここで何が達成されているのでしょうか?

4

5 に答える 5

4

#element1 #element2element2のIDを持つ要素の内側にあるIDを持つ要素のみをスタイリングしていることを意味しますelement1

両方の要素を同じスタイルでスタイルしたい場合は、要素間にコンマを追加する必要があります:#element1, #element2

#element1 #element2特定のスタイルを上書きしたい場合、それが含まelement2れている場合にのみsayを使用しますelement1。たとえば、element2すべての Web ページに次のスタイルがあるとします。

#element2 {width:800px;}

特定のページの幅を 400 ピクセルにしたい場合は、セレクターをより高いレベルに修飾して、特定のページのその要素をオーバーライドすることができますelement1。

#element1 #element2 {width:400px;}

element2つまり、そのページでは 400px で、他のすべてのページでは 800px になります。

于 2013-07-17T09:52:07.247 に答える
2

最後に選択したものは、 CSS にの id を#element1 #element2持つ子を探すように指示しますが、 ID を使用する場合、ほとんどの場合、ID はオブジェクトを一意に定義するために使用されるため、その必要はありませんが、これらの型にはクラスを使用できます。選択またはオブジェクトの。#element1#element2scoping

スコーピングのためのCSS トリックを参照してください。

于 2013-07-17T09:52:17.180 に答える
0

あなたの例では、#element2代わりに書い#element1 #element2ても変化はありませんが、私の例では：

<div class="class_one">
<div class="class_two"></div>
</div>
<div class="class_two"></div>

CSS の例 1 - 3 つの正方形が表示さ れますhttp://jsfiddle.net/BCq9C/

.class_one {
background: red;
padding: 10px;
width: 30px;
height: 30px;
}

.class_two {
background: blue;
padding: 10px;
width: 30px;
height: 30px;
}

CSS 例 2 - 正方形が 2 つだけ表示されます http://jsfiddle.net/8aDTB/

.class_one {
background: red;
padding: 10px;
width: 30px;
height: 30px;
}

.class_one .class_two {
background: blue;
padding: 10px;
width: 30px;
height: 30px;
}
于 2013-07-17T09:58:26.540 に答える
-1

#element1 #element2#element2一意の要素内の一意の要素をスタイルします#element1

しかし、 anidは一意であるため、そのようにすることはまったく役に立ちません。使え#element2ば十分です。

于 2013-07-17T09:58:51.377 に答える