HTML选择器的优先级

样式的冲突

                -当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时发生了样式的冲突

            发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

            选择器权重

                内联样式            1,0,0,0

                id选择器            0,1,0,0

                类和伪类选择器       0,0,1,0

                元素选择器           0,0,0,1

                通配选择器           0,0,0,0

                继承          没有优先级

写一个div，设置div的样式。

直接在div中设置样式的时候，优先级最高。

如果在在外边设置样式，优先级从高到低：

id选择器            

类和伪类选择器       

元素选择器        

通配选择器           

继承         

 比较优先级时，需要将所有的选择器的优先级相加计算，最后优先级越高，越优先显示

假如id选择器的优先级是100，元素选择器优先级是1；那么#box1的优先级就是100，而div#box1的优先级是101，所以bgcolor就会显示blue

 如果优先级计算后相同，此时则优先显示下边的样式（下边的会将上边的覆盖）：

     将div设置了两个类，r和d，都是类，所以优先级相同，同时定义这两个类的样式，则优先显示下边的样式

 关于通配选择器和继承的优先级：

     通过设置div中的字体大小，而span是div的后代元素，所以正常情况下span也会继承div中的字体大小；但是上边有个通配选择器*，它包括div也包括span，所有*同时也给span设置了一个字体大小，按照选择器优先级，span中会优先显示*中的字体样式。

      如果指定某个样式的最高优先级，可以在其的后边添加 ！important，则此时该样式会获取到最高的优先级，甚至超过了内联样式

注意：在开发中能不使用就不用。