CSS用b覆盖元素a

Question

在我的CSS中我有

.footer a {color :red}
.footer b {color :green}

代码中的

：<b><a> ... </a></b> .... <a>..</a>

它显示全部为红色。 我想指定不同的<a>..</a>颜色，但<a>覆盖<b> ..我该如何处理？

Answer 1

<b><a> ... </a></b> .... <a>..</a>

换句话说，粗体标记包含一个标记。根据CSS，a标签中的文本是红色的。这会覆盖b标签的样式。

试试这个CSS：

.footer a {color :red}
.footer b a {color :green} /* Apply rules to a tags within bold tags */

另一方面，当我希望一切都变红时，你说一切都是绿色的。这表明HTML错误。通过W3C验证器运行HTML。

Answer 2

.footer b {color :green}
.footer a {color :red}

如果您如上所述声明，则第二个定义将覆盖第一个。

---

注意：但是，如果您只想要＆lt; a＆gt;在（孩子的）＆lt; b＆gt;里面，你应该使用

.footer b a {color :red}

Answer 3

请注意.footer a本质上是指“具有类页脚的元素中的所有Anchor元素”，而.footer b表示“具有类页脚的元素中的所有粗体元素”。如果您的HTML是这样的：

<div class="footer">
<b>Lorem Ipsum Dolor</b>
</div>

它变得绿色是有意义的。

Answer 4

除非您以不同方式设置样式，否则a元素将为红色。由于它有一种风格，因此不会inherit。

.footer a {color :red}
.footer b,
.footer b a {color :green}

Answer 5

试试这个：

.footer b,
.footer b * {
    color: green
}

选择器.footer b *还会选择b的所有后代元素。

Answer 6

此外，使用Firebug来调试CSS发生的事情。它免费，易于安装且非常有用：

http://getfirebug.com/