最近做网页的时候无意中发现一个有意思的问题,只在Ie中测试过,不知道在firefox中有什么现象。
先定义样式表:
<STYLE>
DIV .head1
{
background-color: yellow;
}
DIV.head2
{
background-color: red;
}
</STYLE>
展现样式:
<div class="head1">div1</div>
<span class="head1">span1</span>
<div class="head2">div1</div>
<span class="head2">span1</span>
div1
span1
div1
span1
测试head1 与head2的区别
<div>
<div class="head1">div2</div>
<span class="head1">span2</span>
</div>
<p>
<div class="head1">div2</div>
<span class="head1">span2</span>
</p>
div2
span2总结:
head1样式和head2样式的主要区别就是中间多了一个空格。
感觉像是head1样式是指在div内部适用的样式; head2样式是应用于div元素上的样式;
另:由于博客上的编辑器自动在style之间增加了cdata角标,导致我的效果无法显示,head1的效果我是通过设置背景色完成的,有兴趣的朋友可以把那几段代码拷出来存成一个文件,就可以看到效果。
请高手指教。