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>

 

注意事项：

1. css样式还可以更多嵌套定义，不如想让样式更规范化，更有约束性，避免比的地方胡乱调用。
2. css样式的命名越复杂越好，尽量让人一看就知道是什么位置的样式。比如 pageTitle ul li .smallTitle a:hover{}，意思是“整个页面的 ul标签里面的 li标签里面的 小标题里面的 a的超链接当有鼠标经过时怎样怎样”
3. css样式的名字不要重复，否则整的局部的css样式和全局的css样式又覆盖又继承的，脑子很混乱；css样式的名字也不要和html标签名字重复，除非是标签的样式定义。
4. 小妹无奈又开始玩起美工的活了，这是自学后的总结。
5. 一开始看css文件就头晕了，定义都看不懂。而且不同的浏览器语法还不一样，ie6和ie7的现实效果还不一样，真服了，能不能统一啊。上面也是自己一点一点试出来的总结，肯定有不对的地方，希望高人指点