css- background-color:#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元素嵌套到！试着使用下面的代码：

<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类。