css文件定义，定义都看不懂，还怎么引用啊...

举个例子:

/*第一组*/
.tags{}
#tags{}
LI{}
/*第二组*/
.tags .mycss{}
/*第三组*/
#tags .mycss{}
#tags.mycss{}
/*第四组*/
LI .mycss{}
LI.mycss {}
/*第五组*/
LI:hover{}

引用代码：

<!--第一组-->
<div class="tags">可以多个标签去引用.开头的css</div>
<div id="tags">一个页面id是唯一的，一般都是一个标签去引用#开头的css</div>
<li>当一个css样式的定义名字和html标签名相同，则在某个范围里面的这个标签会自动显示该样式</li>
<!--第二组-->
<div class="tags"><div class="mycss">在第一组的基础上有了约束条件：".mycss"只有在".tags"的标签内才能可见，否则不可见</div></div>
<!--第三组-->
<div id="tags"><div class="mycss">与第二组同理：".mycss"只有在"#tags"的标签内才能可见引用才有效，否则不可见</div></div>
<div id="tags" class="mycss">需要特别注意（没有空格）：只有id为"tags"的标签才能引用".mycss",才有效果，否则无效</div>
<!--第四组-->
<li><div class="mycss">与第三组同理：".mycss"只有在<li>标签内才能可见引用才有效，否则不可见</div></li>
<li class="mycss">需要特别注意（没有空格）：只有<li>标签才能引用".mycss",才有效果，否则无效</li>
<!--第五组-->
<li >需要特别注意（冒号）：一个标签有很多属性，想针对某个标签的属性定义样式，就这样实现。hover是鼠标经过的意思，该li标签在有鼠标经过时就会自动的现实css样式，不用写js脚本去实现啦</li>

注意事项：

css样式还可以更多嵌套定义，不如想让样式更规范化，更有约束性，避免比的地方胡乱调用。

css样式的命名越复杂越好，尽量让人一看就知道是什么位置的样式。比如 pageTitle ul li .smallTitle a:hover{}，意思是“整个页面的 ul标签里面的 li标签里面的 小标题里面的 a的超链接当有鼠标经过时怎样怎样”

css样式的名字不要重复，否则整的局部的css样式和全局的css样式又覆盖又继承的，脑子很混乱；css样式的名字也不要和html标签名字重复，除非是标签的样式定义。

小妹无奈又开始玩起美工的活了，这是自学后的总结。

一开始看css文件就头晕了，定义都看不懂。而且不同的浏览器语法还不一样，ie6和ie7的现实效果还不一样，真服了，能不能统一啊。上面也是自己一点一点试出来的总结，肯定有不对的地方，希望高人指点