ID 选择器在我的 CSS 中不起作用

发布于 2024-12-08 16:24:12 字数 2096 浏览 0 评论 0原文

我不知道这里出了什么问题。我的 CSS 样式不适用于我的某些 ID,也就是说,这些样式没有被 chrome 或 FF 应用甚至看到。 无效的 ID 都是 1_1、1_2、1_3 等。

请注意,ID“buttons_menu”正在工作。

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;
}

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;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

碍人泪离人颜 2024-12-15 16:24:12

HTML ID 不能以数字开头。将它们更改为 some_prefix_1 等。

请参阅 这个问题了解更多信息 - XHTML 还有其他限制...而 HTML5 似乎采取了更宽松的路线。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文