为什么我的块元素的宽度和高度为0？

Question

I'm working on html for a 5-star rating system, and for some reason I can't get my anchors to take on a width and height, even when I set them as a block element. I've narrowed the problem down to this basic code:

CSS:

.outerdiv{
    height:20px;
    width:90px;
    background-color:red;
    }
.innerdiv{
    height:20px;
    width:63px;
    background-color:blue;
    }
.1{
    display:block;
    height:20px;
    width:18px;
    z-index:5;
    background-color:green;
    }
.1:hover{
    background-color:orange;
    }​

HTML:

<div class="outerdiv">
    <div class="innerdiv">
        <a class="1"></a>
    </div>
</div>​

Also at: http://jsfiddle.net/knoell8504/qsjqL/4/ The main difference between this code and the code I'm using is that this code uses a background color where my code uses a background image.

Answer 1

Class names cannot start with a number (I think that's changing in HTML5, but it's still not a good idea). Therefore the styles aren't being applied.