CSS层级关系

如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出

选择器一样的情况下后面的会覆盖前面的属性

css

p {
  color: red;
}
p {
  color: black;
}
/* 最终黑色 */

一个选择器越多特性，样式冲突的时候将显示它的样式

tag(标签选择器):1
class(类选择器):10
id(id选择器):100
tag行内样式:1000

示例

body #container .active p:1+100+10+1 = 112
div p.active:1+1+10 = 12
div p:1+1 = 2

html

<div><p>文字显示为蓝色</p></div>

css

p {
  color: green;
}
/* 1 */
div p {
  color: blue;
}
/* 1+1 = 2 */

总结

继承不如指定:继承的样式永远没有指定的样式优先
id>class>tag>*
越具体越大
tag#id>#id,tag.class>.class

html

<style>
  .class1 p#id2 .class3 {
    font-size: 25px;
  }

  div .class2 span#id3 {
    font-size: 18px;
  }

  #id1 .class3 {
    font-size: 14px;
  }

  .class1 #id2 .class3 {
    font-size: 12px;
  }

  #id1 #id2 {
    font-size: 10px;
  }
</style>

<div id="id1" class="class1">
  <p id="id2" class="class2">
    <span id="id3" class="class3">我是多大字号？</span>
    <!--  25px -->
  </p>
</div>

CSS层级关系 ​

CSS层级关系