为何内层div无法应用CSS样式？代码问题排查求助

你遇到的样式不生效问题，核心原因是CSS中ID选择器不能以数字开头——哪怕HTML5允许ID属性值以数字开头，但CSS的选择器规则依然要求ID选择器的第一个字符必须是字母（a-z/A-Z）、下划线（_）或者短横线（-），不能是数字。

你的代码里，HTML中的<div id="2nd-div">和CSS中的#2nd-div，ID以数字2开头，这违反了CSS选择器的命名规则，导致浏览器无法识别这个选择器，自然不会应用对应的样式。

修正方案 #

只需要把ID改成合法的命名格式即可，比如把2nd-div改成second-div（更具可读性），或者_2nd-div（下划线开头），下面是修正后的完整代码：

修正后的HTML代码 #

<body>
  <div id="body-div">
    <header>
      <img id="header" src="header.jpg">
    </header>
    <nav>
      <a class="nav-a" href="#">Home</a>
      <a class="nav-a" href="#">About</a>
      <a class="nav-a" href="#">Blog</a>
      <a class="nav-a" href="#">Contact</a>
    </nav>
    <div id="second-div">
    </div>
  </div>
</body>

修正后的CSS代码 #

<style type="text/css">
body{
  background-color: #A09E85
}
#header{
  width:1310px;
  height: 250px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-left: 10px;
}
#body-div{
  background-color: #D4D3B7;
  width: 1328px;
  height: 1000px;
  margin-top:-10px;
}
a.nav-a{
  text-decoration: none;
  padding: 20px;
  color: black;
  font-weight: bold;
}
#second-div{
  background-color: #F9F8F4;
  width:1310px;
  height: 900px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>

额外说明 #

如果实在不想修改ID名称，也可以用属性选择器来选中这个元素，比如div[id="2nd-div"]，但这种写法不如合法的ID选择器直观，也不符合前端最佳实践，所以更推荐直接修改ID为合法命名。

内容的提问来源于stack exchange，提问作者Nima Bahar