html - 覆盖没有样式的 CSS 样式

Question

我在标签中有一个 div 。a 标签具有某些样式，例如颜色等，这些样式也适用于 div 标签。我不希望将标签的样式应用于 div 标签。是否有捷径可寻？

Answer 1

这就是 CSS（级联样式表）的工作方式。你需要做。

a div { color: #f00; }

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

Answer 2

由于<div>标签在标签内<a>，因此应用于标签的 CSS 样式<a>将被标签继承<div>。

您可以简单地将CSS 类<div>应用于具有所需 CSS 样式的标签。所以应用于<div>标签的类将覆盖父<a>标签样式。

Answer 3

正如其他人提到的，这是 CSS 的工作方式，子继承其父属性的属性，如果您不想要继承属性，则必须手动覆盖。

但是，有一个小功能，特殊值自动值 - 如果您将 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;
}