2011-01-06 12 views
5

以下では、「名前」クラスをどのように参照しますか?divにネストされた名前付きスパンクラスのCSS構文は何ですか?

<div class="resultDetails"> 
<span class="name">Name</span> 
<span class="address">Address</span> 
</div> 
+0

詳しいことはできますか? – Chandu

+0

利用可能な回答からわかるように、ここには制限要因があるかどうかを実際に把握する必要があります。 'span'には' name'だけ必要ですか? 'resultDetails'内でのみ? 'div'sの直後だけですか? – jcolebrand

答えて

7
div span.name { ... } 

div ..という名前のCSSクラスとそれらの要素を見て伝えます。..サブレベル

.nameスパン要素を見て伝えます...そして、要素型

スペースspanを伝えますname

2
div.resultDetails > span.name { ... } 

動作するはずです。

+0

これらのスタイルをdivタグにのみ適用したいのでない限り、そこに 'div'を置いてはいけないと言います....タグなしのCSSセレクタをつけるとスタイルシートのファイルサイズが小さくなります。 – Webnet

+0

@webnet:OPは明示的なルートが必要なので、_that_ spanタグを取得することに特化していました。私はあなたに同意する傾向があります。 –

+0

私はこれが絶対的だと思います。たぶん、彼は多分divとspanのこの特定の組み合わせのためのスタイルを設定したいと思うかもしれない一般的なaprochが必要です。 –

3

単に

<style> 
.name 
{ 

} 
</style> 

必要なのは、セレクタのいくつかのタイプ

div span.name // selects all spans with class "name" in any div 
div > span.name // this one selects only the spans that are direct children of a div 
div.resultDetails span.name //select only spans with class "name" in only divs with class="result Details 
.resultDetails .name // selects any element with class "name" in any element with class "resultDetails" 

を使用することができ、他の要因 がそうでなければ選択のより多くの方法がありますがない限り、クラス自体の名前ですがポイントを取得します。

1

div.resultDetails> span.nameは、ほとんどのブラウザで機能します。

ただし、IE6では機能しません。それが問題であれば、 div.resultDetails span.name {}はスパンを正しくターゲットにする必要があります(ターゲットにしないdiv内に入れ子になったspan.name要素がない場合)。

関連する問題