css-背景颜色：#xxxxxx；不工作

Question

在我的导航栏中我有这个代码。

<div id="aboutnav"><a class="hl" href="#"><h2>about\a</h2></a></div>

在这种情况下，div 所做的就是将文本放在适当的位置，并且在 a.hl 中它是 -

a.hl{

background-color:#000;
text-decoraction:none;
color:#fff;

}

文本的颜色正确，位置正确，但没有背景颜色。

Answer 1

这是因为在 HTML4/XHTML 中你不能将 hx 元素嵌套到 a! 中。尝试使用这个：

<div id="aboutnav"><h2><a class="hl" href="#">about\a</a></h2></div>

我认为你需要以类似的方式更新你的CSS：

a.hl{
      display:block;
      background-color:#000;
      text-decoraction:none;
      color:#fff;    
}

Answer 2

您的样式可能被 h2 的另一种样式覆盖。尝试：

a.h1 h2{
    background-color: #000;
}

Answer 3

你应该像这样编写 HTML

<div id="aboutnav">
    <h2>
        <a class="hl" href="#">about</a>
    </h2>
</div>

然后像这样设置样式

#aboutnav h2 {
    background-color:#000;
}

#aboutnav h2 a {
    text-decoration:none;
    color:#fff;
}

示例： http://jsfiddle.net/jasongennaro/rbxBL /

仅供参考...您的 text-decoration 拼写错误。

此外，您确实不需要 a 的类当 HTML是这样完成的。