css - 基本的な CSS クラスと階層について - すべてのページ要素に影響を与えるわけではありません

Question

私がやりたいことをしている次のサンプルがあります：

<style>
div { position: relative; padding-top: 30px; display: block; }
div h3 { position: absolute; top: 0px; left: 0px; display: block; }
div h3 a { width: 200px; height: 230px; display: block; }
div img { width: 200px; height: 200px; display: block; }
</style>

<div>
 <h3><a href="/xxxx/abcd.htm">linker</a></h3>
 <img src="/xxxx/abcd.jpg" alt="linker image" />
</div>

明らかな問題は、必要な div だけでなく、ページ上のすべてのアイテムに影響することです。階層を失うことなく、ページのすべての要素に影響を与えずに、適切なクラス形成に配置するにはどうすればよいですか。

ありがとう

Answer 1

cssの子孫セレクターの詳細については、http ：//www.w3.org/TR/CSS2/selector.html#descendant-selectorsを参照してください。

Answer 2

classes とIDsを使用します。それらは問題を解決するために使用されます-要素を区別します。IDs はドキュメント全体で一意である必要がありますが、classes は複数回発生する可能性があります。また、1 つの要素は複数のクラス (空白で区切られたリスト) を持つことができますが、ID は 1 つだけです。

<div id="unique-id" class="class1 class2 class2">    
    <h3 class="child-h3"><a href="/xxxx/abcd.htm">linker</a></h3>
</div>

そしてcssで：

#unique-id{
   ...styles
}

#unique-id h3,
#unique-id child-h3{ /* both selectors will match the same element*/
    ...styles
}

.class1{
   ...styles
}

ここで短いチュートリアルを見つけることができます: http://www.tizag.com/cssT/cssid.php

また、セレクターを調べることもできます: http://www.w3.org/TR/CSS2/selector.html

Answer 3

これは、より優れた簡単な方法です。

<style>
.div { position: relative; padding-top: 30px; display: block; }
.div h3 { position: absolute; top: 0px; left: 0px; display: block; }
.div h3 a { width: 200px; height: 230px; display: block; }
.div img { width: 200px; height: 200px; display: block; }
</style>

<div class='div'>
 <h3><a href="/xxxx/abcd.htm">linker</a></h3>
 <img src="/xxxx/abcd.jpg" alt="linker image" />
</div>