2009-05-12 9 views
2

これはCSSの性質上可能であり、カスケードしている場合でも確実ですが、とにかく試してみます。CSS - ネストされたDIV:Clear Sub Styles

私は、利用者が選択するいくつかの重要な要素を含む利用規約のボックスを作成しています。 T &のCにはフォームコンポーネント(ラジオボタン、チェックボックス)があります。私は本当にIFrameに入れて、ユーザーの入力をそのようにするという問題を抱えていません。

オーバーフローで自動プロパティを追加したと思ったので、T & Cのスクロールボックスを作成し、そのオプションをそのように選択させることができました。

T & Cにはサイトcssの影響を直接受けるマークが付いているので、このdivにサイトのメインCSSを使用させない方法を見つけ出す必要があります。ここで

は私がしようとしているアプローチのようになり、いくつかのサンプルコードです:

<html> 
<head> 
    <style> 
     div 
     { 
      border: solid 1px #000; 
     } 
     div small 
     { 
      font-size: 17pt; 
     } 
    </style> 
</head> 
<body> 
    <div style="overflow: auto; width: 500px; height: 300px;"> 
     <small>This is small text</small> 
     <div> 
      <small>This is small text</small> 
      Lorem ipsum dolor sit amet, consectetur adipiscing 
      elit. Donec vulputate mi sed nisl blandit sed porttitor massa fringilla. 
     </div> 
    </div> 
</body> 
</html> 

この結果は、いくつかのテキストと、かなり小さな黒い箱と、より多くのテキストやとサブボックスですここのキーアイテムは<small/>にラップされたテキストです。

特定のdivの下に何かを持つ方法は、CSSを継承しないのですか?たぶん私はこれとはまったく異なるアプローチをとる必要があります。

思考?アイデア?提案?

ありがとうございます!

答えて

4

タグ名を直接使用する代わりに、2組のクラス( "内側"と "外側")を保持し、それらのクラスで作業します。

div.innerの定義とdiv.outerの定義をそれぞれ別々に使用できます。しかしinnerは、明示的に設定を取り消す必要がありますouterが、しかし。

<div class="outer"> 
    <div class="outer">Some content. <small>Small text.</small></div> 
    <div class="inner container"> 
    <small>Blah blah blah</small> 
    More content 
    </div> 
</div> 

そして、あなたのCSSのよう

何か必要なものは何でも定義し、

div.outer { 
    border: 1px solid black; 
} 
div.outer small { 
    font: 17pt; 
} 
div.inner { 
    border: none; 
} 
div.inner small { 
    font: 15pt; 
} 
div.container { 
    overflow: auto; 
    width: 500px; 
    height: 300px; 
} 
+0

さて、これは私が恐れていたものです。だから私のサブコンテンツがCSSから直接変更される異なるタグのトンを持っているなら、私はすべての私のタグを変更するために上記のCSSクラスを作成する必要があります...私は悲しいですが、悲しみの第一歩は拒否。 – CodeLikeBeaker

0

は、CSSを継承しないようにする方法があるとは思いません。私は唯一の方法は、両親に明示的に設定されたスタイルをすべて「リセット」することだと思います。デフォルトのプロパティのリストについては、例えばhttp://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/を参照してください。

0

2番目の注意として、スタイルのカスケードを本質的に防止する方法はありません。結局、CSSを定義するのはカスケードです。したがって、Welbogが提案した.inner.outerのアプローチを使用することに軽減されます。

したがって、通常どおりにメイン文書のスタイルを定義することになります。しかし、T & C divの下の同じ要素のスタイルをオーバーライドするには、明示的に/ re-styleをオーバーライドする必要があります。明示的に例えば、囲んでいるdiv要素のidを持つすべての宣言を前置きしt_and_c.cssに、あなたは明確さを維持するために2つのスタイルシートを使用することができますが、あなたは覚えておく必要があるだろう:

#t&c p {...} 

#t&c a:link, 
#t&c a:visited {...} 
関連する問題