【CSS】CSS解决样式冲突的基本机制-继承、特指度、层叠

css:

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
    

html:

<h1>
  你好啊
  <span>~世界</span>
<h1>

一、关于冲突

在以上的例子中，创建了两个同样的样式规则作用于h1上，这两个规则冲突了，但是哪个规则才对h1起作用呢？在这种冲突中，层叠和特指度是对此冲突进行解决的机制。
所以需要了解层叠和特指度的工作机制，才能知道当前h1的字体颜色究竟显示什么。

其中，还有一个概念叫做继承。所谓继承就是把一个元素的某种属性值传递给后代。这就意味着，当前子元素的表现形式有些可能是继承于父元素的默认值，这种机制就会导致当前子元素的表现并不会如人所愿一般。

二、解决样式冲突的机制-特指度、层叠、继承

1. 什么是特指度(优先级)？

   特指度，有点像数学中的计数进制。其中选择器的计数规则，有千，百，十，个。

选择器	千	百	十	个	总计特指度
h1	0	0	0	1	0001
h1 + p::first-letter	0	0