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 可以出现多次。一个元素也可以有多个类（空格分隔列表），但只有一个 ID。

<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>