ID 选择器在我的 CSS 中不起作用
我不知道这里出了什么问题。我的 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
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.