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元素嵌套到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/

Fyi ...您的text-decoration拼写错误。

此外，你真的不需要在类的a当HTML完成这样。