覆盖没有样式的CSS样式

时间:2013-08-03 20:14:50

标签: html css

我在标签中有一个div。 a标签具有某些样式,如颜色等,也适用于div标签。我不希望标签的样式应用于div标签。有一个简单的方法吗?

3 个答案:

答案 0 :(得分:0)

这就是CSS(级联样式表)的工作原理。你需要这样做。

a div { color: #f00; }

覆盖您在父<a>标记上设置的颜色。

答案 1 :(得分:0)

由于<div>标记位于<a>标记内,因此应用于<a>标记的CSS样式将由<div>标记继承。

您只需将 CSS类应用于具有您需要的CSS样式的<div>标记即可。因此,应用于<div>标记的类将覆盖父<a>标记样式。

答案 2 :(得分:0)

正如其他人提到的那样,CSS是如何工作的,孩子继承了父母的属性,如果你不想要继承属性,你必须手动覆盖。

但是,有一个小特征,特殊值auto - 如果你使用id作为有效属性,例如。 width该元素未获得继承值,但默认由浏览器计算。

http://jsfiddle.net/G3WUw/

HTML

<div class="general">
    <div>
        Width set to 200px by general rule<br>
        Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </div>
    <div class="special1">
        Width set to 300px by specific rule<br>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    </div>
    <div class="special2">
        Width set to default value calculated by browser<br>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    </div>
</div>

CSS

.general div {
    background: lightgreen;
    margin: 5px 0;
    width: 200px;  
}

.general .special1 {
    width: 300px;
}
.general .special2 {
    width: auto;
}