选择器的优先级分析

对于昨天我们学到的五个css基础选择器，我们在设置样式的时候，该怎样选择选择器去设置想要的样式呢？又或者说我们设置了样式，却没有达到我们想要的结果，这是为什么呢？下面我们一起来探讨一下这个问题。

对于css的基础选择器，我们在测试过后发现选择器有优先级之分，下面是对选择器优先级的详细说明。

1、对于同一个选择器，同一个元素发生样式重叠的时候，后面样式覆盖前面，没有发生重叠时，综合所有样式

div {

          width: 200px;

          background-color: red;

}

div {

         height: 100px;

         background-color: blue;

}

最终下面的覆盖上面的，div为蓝色背景

2、不同选择器：样式冲突下，优先级高的覆盖低的

（1）body div {         /*权重是（0，0，0，2）*/

                 background-color:red;

        }

      div {          /*权重是（0，0，0，1）*/

                backgroung-color:blue;

      }

      这里为什么最终div为红色呢，其实不是简单的说上面的那个有body、div两个，下面只有一个div，这里我们需要提到一个优先级的算法，也就是如何计算优先级大小.   （0，0，0，0）就是当前选择器优先级的权重，规定第一个数字代表！important的个数，第二个数字代表的是id选择器的个数，第三个数字对应的是类选择器的个数，第四个数字对应的是标签选择器的个数，

css选择器权重与优先级

所以例子中由权重从左往右比较得到上面的权重大，div最终为红色

3、优先级排序：*<tags<class<id<style<!important

       !important慎用，非要用的时候要写个注释说明一下