在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果
当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则
简而言之，在最后的效果会生效
元素选择器不是很具体：优先级低
类选择器稍微具体点： 优先级高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索：伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="h-color">猜猜我是什么颜色的</h1>
</body>
</html>
编写下CSS文件
.h-color {
color: red;
}
h1 {
color: blue;
}
打开浏览器查看效果
可见效果是红色的
父元素上的css属性是可以被子元素继承
inherit： 设置该属性会使子元素属性和父元素相同
initial： 设置属性值和浏览器默认样式相同
unset： 将属性重置为自然值，也就是如果属性是自然继承那么就是inherit，否则就是initial
三个因素需要考虑
1.重要程度
2.优先级
3.资源顺序
不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配
原文：https://www.cnblogs.com/yiluotalk/p/13684008.html