CSS样式的层级关系

经常看到这样的样式写法，例如：
.main .contentBox .sideBar .box .content .tips li.li1{ float:left; width:90px; height:25px;。。。。。。。。}
写出了HTML一层一层的层级关系。
上面的样式也可以这样写：
.li1{ float:left; width:90px; height:25px;。。。。。。。。}

我不太明白这两种写法的区别在哪里？？我一直认为是跟CSS的权重有关。麻烦各位大大帮小弟说明下，谢谢了！！

不一样的  .main .contentBox .sideBar .box.content .tips li.li1{ float:left; width:90px; height:25px; 代表着在类为main里面的类为contentbx里面的类为……以此类推 里面类为li1高度是25px宽为90px，向左浮动，而.li1{ float:left; width:90px; height:25px;的样式代表所有类为li1的元素都是高25px宽为90px,向左浮动，并且上面的样式覆盖下面的样式。

[ 本帖最后由 zhengmingming 于 2011-9-6 19:07 编辑 ]

一个是权重，另一个就是共用样式和私用样式了，比如说两个ul，它们的子元素除了背景色之外都一样，那可以直接用li {}来定义相同的公用样式，用 .ul_1 li {} ， .ul_2 li {} 来定义不相同的样式。所以你可以根据你的元素之间的差别来选择用哪种方法