<body>
<div id="header"><div class="red"></div></div>
<div id="content"></div>
<div id="footer"><div class="red"></div></div>
</body>
样式表↓
#header .red{}
#footer .red{}
用#的是ID选择器,命名时用id,在一个页面里不能重复出现。
用.的是类选择器,命名时用class,在一个页面里可以出现多次。
配合最上面那几句代码一起看,那这个样式表的意思就是id名为header的Div里面嵌了一个class名为red的Div
不知道你看得懂不?顺便和你分享一个资料,看下图。
<input class="sub" type="submit" value="提交"/>input 里有个 class sub
.sub{padding-top:5px
}
css 中有个 .sub
它当然会按照你的指示 padding-top 5px;要不变形,要么把 input 的 class 删除,要么把 css 中的 .sub 删掉。
父类和子类之间要有空格,你的写法有误。你应该写成.h .left,注意它们中间应该有个空格才行。有空格跟无空格是两种完全不同的定义,所以你的测试当然无效。
否则你写的是:.h.left,这个代表兄弟类,即class="h left"。