CSS样式优先级

CSS样式分为内联样式和外部样式，一般情况下：内联样式的优先级大于外部样式。即style样式>id选择器>class选择器>元素选择器。

例如：

.on{width:20px;height:20px;line-height:20px;font-weight:bold;background-color: #BCC029;}.person-num>li{float: left;list-style: none;color: #fff;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;margin: 1px;border: 1px solid #707070;background-color: #995B5B;}

当对li标签添加上面两个样式时，.on样式中重复的内容是不会生效的。因为.on样式的优先级值小于li，它会被li样式覆盖。但是有些时候我们需要让自定义的样式始终生效，那么可以使用！important标识。但建议轻易不要使用。

优先级顺序:!important>style>id>伪类>属性选择器>class>tag>声明先后顺序>全局选择器。

!important的意思是我是最重要的，其他样式都不能代替。

例如：

line-height:20px!important;

当选择器相同时，根据声明先后顺序确定优先级。

优先级计算：（可理解为2进制代码）

style:1,0,0,0

id:0,1,0,0

class:0,0,1,0

tag:0,0,0,1

计算原则：

1.遵循单一样式的优先级

2.标签  #id>#id;  

   标签  .class>.class

3.越具体，值越大，值越大，越优先

4.相同的样式类型，值加1

例如：

.h1{/*0 0 1 0*/color:blue;}div .h1{/* 0 0 1 1 */color:green;}div #id .h1{/* 0 1 1 1 */color:green;}div #id #ip .h1{/* 0 2 1 1 */color:balck;}

子选择器

    子选择器仅指直接后代，用>来进行选择，通常所说的后代选择器则是所有后代，包含孙子、从孙等后代，用空格进行选择。

例如：

#muen .towmuen li{height:35px;border-bottom: 1px dashed #D3D3D3;padding-top:11px;}

选择twomuen样式下所有的li标签。

#muen .towmuen>li{height:35px;border-bottom: 1px dashed #D3D3D3;padding-top:11px;}

选择twomuen样式下的第一代li标签。