CSS之选择器、优先级、继承-2.优先级

!Important>行内样式>ID 选择器>类选择器>标签>继承>浏览器默认属性

1. !Important优先级高于行内样式

  .parent .child .one_two {
      background-color: darkslategray !important;
    }
<div style="background-color: blueviolet" class="one_two">12</div>

.one_two颜色是darkslategray。

2. 行内样式优先级高于ID 选择器

   <div id="one" style="background: blue" class="child">
    #one,
    #two {
      background-color: red;
    }

#one的颜色是blue。

3. ID 选择器优先级高于类选择器

<div id="two" class="child">2</div>
 .parent #two {
      background-color: purple;
 }
.child {
      width: 100px;
      height: 100px;
      background-color: green;
      margin: 0 10px 10px 0;
}  

颜色是purple。

4. 类选择器优先级高于标签

.three {
    display: inline;
}

div {
    display: inline-block;
}

.three行内元素。

5. 标签优先级高于通配符

 * {
      box-sizing: content-box;
    }
 .parent {
      width: 400px;
      height: 200px;
      background-color: lightgray;
      box-sizing: border-box;
    }

    .child {
      width: 100px;
      height: 100px;
      background-color: green;
      margin: 0 10px 10px 0;
      box-sizing: border-box;
    }    

.parent .child的box-sizing: border-box。

6. 继承优先级高于浏览器默认属性

div {
    display: inline-block;
    font-size: 18px;
}

* {
    box-sizing: content-box;
    font-size: 30px;
}

div {
    display: block;
}

浏览器默认属性优先级比较低， display: inline-block。