简体   繁体   中英

ID selectors not working in my CSS

I cant figure out what the problem is here. My CSS styles are not working for some of my IDs, that is, the styles aren't being applied or even seen by chrome or FF. The IDs that are not working are all the ones like 1_1, 1_2, 1_3.

Note that the ID "buttons_menu" IS working.

HTML:

    <div id="buttons_menu">
        <div class="row">
            <div id="1_3" class="menu-item"></div>
            <div id="2_3" class="menu-item"></div>
            <div id="3_3" class="menu-item"></div>
        </div>
        <div class="row">
            <div id="1_2" class="menu-item"></div>
            <div id="2_2" class="menu-item"></div>
            <div id="3_2" class="menu-item"></div>
        </div>
        <div class="row">
            <div id="1_1" class="menu-item"></div>
            <div id="2_1" class="menu-item"></div>
            <div id="3_1" class="menu-item"></div>
        </div>
    </div>

CSS:

   body{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width: 1024px;
    height: 768px;
    background-color: white;
    margin: 0px;
    padding: 0px;
    position: relative;
    background: white url('../images/index/bg.png') no-repeat;
}
#buttons_menu{
    position:absolute;
    top:250px;
    left:66px;
    height:100%;
    width:100%;
}
.row{
    margin-bottom: 26px;
}
.menu-item{
    display: inline-block;
    border:1px solid black;
    margin-right: 5px;
    width: 209px;
    height: 122px;
}
#1_3{
    background: url('../images/index/1_3.png') no-repeat;
}
#2_3{
    background: url('../images/index/2_3.png') no-repeat;
}
#3_3{
    background: url('../images/index/3_3.png') no-repeat;
}
#1_2{
    background: url('../images/index/1_2.png') no-repeat;
}
#2_2{
    background: url('../images/index/2_2.png') no-repeat;
}
#3_2{
    background: url('../images/index/3_2.png') no-repeat;
}
#1_1{
    background: url('../images/index/1_1.png') no-repeat;
}
#2_1{
    background: url('../images/index/2_1.png') no-repeat;
}
#3_1{
    background: url('../images/index/3_1.png') no-repeat;
}

An HTML ID cannot begin with a number . Change them to some_prefix_1 , etc.

See this question for more information - there are additional limitations in XHTML ... while HTML5 seems to be taking the more permissive route.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM