两个css郁闷的发现

1、最郁闷的发现！！

先看代码：

<style>#a #b #c span{color:red;}#b #c span{color:blue;}</style><div id="body"><div id="a"><div id="b"><div id="c">猜一猜我是什么颜色？<span>bbb</span></div></div></div></div>

不要运行，猜猜，页面中的字是red还是blue？

运行一下，颜色是red....

也就说这句：#b #c span{color:blue;} 没能覆盖前面那句

如果把这句改成 #a #b #c span{color:blue;} ，字就是blue了

改成#body #b #c span{color:blue;} ，也是blue

甚至 #body #a #b span{color:blue;} 也是blue

多次试验，最终我得出一点，标签用id，也就是css里用#...定义的，后面如果要覆盖前面的属性值，居然要比数量。。。。第二次的#号数量要大于等于前面#的数量。

有点无语。。。不知道这是bug还是什么。。。？

2、比较郁闷的发现

先看html：

<ul id="menu">
<li><a href="#">公司简介</a></li>
<li<a href="#">对应业种及优点</a></li>
<li<a href="#">业务承担形式</a></li>
<li<a href="#">人才派遣形式</a></li>
<li<a href="#">收费职业介绍形式</a></li>
<li<a href="#">免费事项</a></li>
<li<a href="#">FC招聘</a></li>
<li<a href="#">邮箱</a></li>
</ul>

一组列表，现在，我们要这些li，横向显示，加css样式。

<style>
#menu li{float:left}
</style>
<ul id="menu">
<li><a href="#">公司简介</a></li>
<li<a href="#">对应业种及优点</a></li>
<li<a href="#">业务承担形式</a></li>
<li<a href="#">人才派遣形式</a></li>
<li<a href="#">收费职业介绍形式</a></li>
<li<a href="#">免费事项</a></li>
<li<a href="#">FC招聘</a></li>
<li<a href="#">邮箱</a></li>
</ul>

没有问题，现在要做滑动门效果，首先给li设置一个背景图片，左对齐。给a设置个背景，右对齐，互相覆盖，最终形成自适应大小的滑动门。
背景图片高度为32px。因为要给a标签设置高度，所以要设置a的显示形式为block，因为a的宽度不是固定的，所以不能设置一个固定的值。代码如下：

<style>#menu li{float:left;background:url(/file/UploadPic/200712/16/20071216154315194.gif) no-repeat left;height:32px;}#menu li a{background:url(/file/UploadPic/200712/16/20071216154315194.gif) no-repeat right;display:block;height:32px;}</style><ul id="menu"><li><a href="#">公司简介</a></li><li><a href="#">对应业种及优点</a></li><li><a href="#">业务承担形式</a></li><li><a href="#">人才派遣形式</a></li><li><a href="#">收费职业介绍形式</a></li><li><a href="#">免费事项</a></li><li><a href="#">FC招聘</a></li><li><a href="#">邮箱</a></li></ul>

好了，问题出现了。。。。。。。。。。。。(ie6下出问题)

由于设置了display:block，并且未给标签“a”设置width，所以“a”的width，ie6是默认为100％的。所以就不是在一行显示了。

开始的时候，我还以为是float:left失效。

我还修改“a”的width为 auto，但都是没用的。auto在ie6下，就是100％。

最终，我发现，解决办法是。。。。。给“a”设置float:left

看效果：

<style>#menu li{float:left;background:url(/file/UploadPic/200712/16/20071216154315194.gif) no-repeat left;height:32px;}#menu li a{background:url(/file/UploadPic/200712/16/20071216154315194.gif) no-repeat right;display:block;height:32px;float:left;}</style><ul id="menu"><li><a href="#">公司简介</a></li><li><a href="#">对应业种及优点</a></li><li><a href="#">业务承担形式</a></li><li><a href="#">人才派遣形式</a></li><li><a href="#">收费职业介绍形式</a></li><li><a href="#">免费事项</a></li><li><a href="#">FC招聘</a></li><li><a href="#">邮箱</a></li></ul>

问题解决

 另外说一点，这样做，在dw cs3里，显示是一个字的宽度，其它的字被挤到下面。听说dw cs3内置的是opera的解释器，但我在opera下测试，显示也是正常的，与ff ie显示效果一样。
为了不影响在dw下制作时看到的效果，可以给a设置overflow:hidden