HTML样式调试求助：div样式不生效仅body样式生效

嘿，这问题其实挺常见的，我一眼就瞅出症结所在了！你CSS里的类选择器都没加英文句点（.），还有大小写不匹配的问题，这就是为啥只有body样式生效，所有div的样式全没反应的原因。

核心问题拆解 #

在CSS规则里，类选择器必须以.开头，用来匹配HTML中带有对应class属性的元素。你现在写的PageBanner、NavBar这些，都是在找名为<PageBanner>、<NavBar>的HTML标签，但你的HTML里用的是<div class="PageBanner">这种类名，自然完全匹配不上。另外还要注意大小写细节：HTML里的类名是Navbar，但CSS里写的是NavBar，大小写不一致也会导致样式失效。

修正后的CSS代码 #

body { 
  font-family: Arial, Helvetica, sans-serif; 
  margin: 0; 
  float: left; 
}
.PageBanner { 
  margin: 0; 
  width: 100%; 
  float: none; 
  /* 这里你写了两个width属性，浏览器会取最后一个生效，建议保留符合需求的那个 */
  /* width: 50px; */
}
.Navbar { 
  background: #FD0C10; 
}
.Header { 
  text-align: center; 
  margin-bottom: 20px; 
}
.SubHeading { 
  text-align: center; 
}
.Content {}
.Footer {}

额外小提醒 #

• 你在.PageBanner里重复写了两次width属性，浏览器会优先识别后面的那个值（也就是50px），如果这不是你想要的效果，记得删掉其中一个。
• HTML里的<div wrapper="Mainwrapper">是自定义属性，如果你想用它来设置样式，CSS里要写成[wrapper="Mainwrapper"]，或者改成class="Mainwrapper"，再用.Mainwrapper来选择会更规范。

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