我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？

    是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。

    07 CSS选择器权重 - 图1

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>选择器权重</title>
    5.     <style type="text/css">
    6.         /*数选择器的数量： id选择器 类选择器 标签选择器*/
    7.         /*0 1 0*/
    8.         .b{
    9.             color: purple;
    10.         }
    11.         /*0 0 3*/
    12.         html body div{
    13.             color: red;
    14.         }
    15.         /*1 0 0*/
    16.         #b{
    17.             color: orange;
    18.         }
    20.     </style>
    21. </head>
    22. <body>
    23.     <div>a</div>
    24.     <div class="b" id="b" style="color: green;">b</div>
    25. </body>
    26. </html>
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>css选择器权重深入</title>
    5.     <style type="text/css">
    6.         /*数选择器的数量： id选择器 类选择器 标签选择器*/
    7.         /* 0 0 3*/
    8.         div div p{
    9.             /*color: yellow;*/
    10.         }
    11.         /*0 0 1*/
    12.         p{
    13.             color: gray;
    14.         }
    15.         /*0 1 0*/
    16.         .active{
    17.             /*color: purple;*/
    18.         }
    19.         /*0 1 1*/
    20.         div .active{
    21.             /*color: black;*/
    22.         }
    23.         /*0 1 1*/
    24.         div div .active{
    25.             /*color: blue;*/
    26.         }
    27.         /*1 2 0*/
    28.         .wrap1 #box2 .active{
    29.             /*color: green;*/
    30.         }
    31.         /*2 0 1*/
    32.         #box1 #box2 p{
    33.             /*color: red;*/
    34.         }
    35.         /*继承来的属性 它的权重非常低 0*/
    36.         #box1 #box2 #box3{
    37.             color: orange;
    38.         }
    40.         .container{
    41.             color: orange;
    42.             font-size: 14px;
    43.         }
    44.         .container ul li {
    45.             color: #000;
    46.             font-size: 16px;
    48.         }
    50.     </style>
    51. </head>
    52. <body>
    53.     <div class="wrap1" id="box1">
    54.         <div class="wrap2" id="box2">
    55.             <div class="wrap3" id="box3">
    56.                 <p class="active">MJJ是什么颜色</p>
    57.             </div>
    58.         </div>
    60.     </div>
    63.     <div class="container">
    64.         <ul>
    65.             <li>小米手机</li>
    66.         </ul>
    67.     </div>
    68. </body>
    69. </html>

    注意：
    还有一种不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的。一般用于修改全局的CSS

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>!important讲解</title>
    5.     <style type="text/css">
    6.         #a{
    7.             color: green !important;
    8.         }
    9.         div{
    10.             color: purple !important;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15.     <div class="a" id="a">a</div>
    16. </body>
    17. </html>