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的现实效果还不一样，真服了，能不能统一啊。上面也是自己一点一点试出来的总结，肯定有不对的地方，希望高人指点