CSS风格个人

Question

我有一张带有常用标签的ccs表     一个。 {}     a.hover {}

我还有一个div = id“页脚”，我想改变字体样式但是全局a。即使我添加了

，a.hover也会覆盖它

#footer{
    color: #333333
}

我可以使用此覆盖，还是需要尝试？ a.#footer或a.hover:#footer

基本上#footer因为a而无法正常工作。虽然其他元素在#footer div中工作，例如margin ...只是字体颜色和悬停??

有人可以告诉我如何设计这个风格而不是让全球化吗？干扰它？

非常感谢

Answer 1

所有关于代码的层次结构：

<强> HTML：

<div>
    <a href="#">Sample link</a>
    <div id="footer">
        <a href="#">Footer link</a>
    </div>
</div>

<强> CSS：

a {
    color: #ebebeb;
}

a:hover {
    color: #000;
}

#footer a {
    color: #3e3e3e;
}

#footer a:hover {
    color: #609;
}

Answer 2

试试这段代码

#footer a,
#footer a:hover{
 color:#333;
}

Answer 3

a之后的点是什么？ 正确的表单是a {}，a:hover {}，a#footer和a:hover #footer

Answer 4

如果要在a元素中嵌套div，则需要使用

#footer a {
    color: #333333;
}

如果您只使用#footer {}，则会将样式应用于div，而a将不会继承颜色，因此您也可以写

#footer {
   color: #f00;
}

#footer a {
   color: inherit;
}

Answer 5

这是specificity的问题。直接为<a>元素设置样式更具体，然后只将一些CSS应用于<div id="footer">元素及其所有子元素。您可以使用

定位页脚中的任何链接

#footer a {
    color: #333;
}

由于descendant selector此规则本身比您在页脚之外的所有其他<a>元素所使用的规则更具体。