css- background-color：#xxxxxx; 不工作

Question

in my navigation bar i have this code.

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

all the div does in the case is put the text in position and in the a.hl it's -

a.hl{

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

}

the text is the right colour, it is in the correct position but there is no background colour.

Answer 1

This is because in HTML4/XHTML you can't nest hx elements into a! Try using this instead:

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

I think you would need to update your css in a similar way:

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

Answer 2

Your style is probably being overridden by another style for h2 . Try:

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

Answer 3

You should write the HTML like this

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

And then style it like so

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

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

Example: http://jsfiddle.net/jasongennaro/rbxBL/

Fyi... you had text-decoration misspelled.

Also, you really don't need the class for the a when the HTML is done this way.