1.css优先级以及继承
css具有两大特性：继承性和层叠性
继承性
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
权重大小比较方法：
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
例1：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???/*1 0 0*/ ???????#box{ ???????????color: green; ???????} ???????/*0 1 0*/ ???????.container{ ???????????color: yellow; ???????} ???????/*0 0 1*/ ???????p{ ???????????color: red; ???????} ???</style></head><body> ???<p id="box" class="container"> ???????赵云是什么颜色 ???</p></body></html>例2
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????/*2 0 1*/ ???????#box1 #box2 p{ ???????????color: red; ???????} ???????/*2 1 1*/ ???????#box1 #box2 .wrap3 p{ ???????????color: yellow; ???????} ???????/*0 3 4*/ ???????div.wrap1 div.wrap2 div.wrap3 p{ ???????????color: green; ???????} ???????????????/*3 0 1*/ ???????#box1 #box2 #box3 p{ ???????????color: pink; ???????} ???</style></head><body> ???????<div id=‘box1‘ class="wrap1"> ???????<div id="box2" class="wrap2"> ???????????<div id="box3" class="wrap3"> ???????????????<p>再来猜猜我是什么颜色？</p> ???????????</div> ???????</div> ???</div></body></html>例3：权重相同处理
当权重一样的 后来者居中
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????#box2 .wrap3 p{ ???????????color: yellow; ???????} ???????#box1 .wrap2 p{ ???????????color: red; ???????} ???????????</style></head><body> ???????<!-- 当权重一样的 后来者居中 --> ???<div id=‘box1‘ class="wrap1"> ???????<div id="box2" class="wrap2"> ???????????<div id="box3" class="wrap3"> ???????????????<p>再来猜猜我是什么颜色？</p> ???????????</div> ???????</div> ???</div></body></html>例4：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???/*继承的权重是0*/ ???????/*#box1 .wrap2{ ???????????color: red; ???????} ???????#box2 .wrap3 p{ ???????????color: yellow; ???????}*/ ???????????????/*权重为0。就近原则 谁描述的近*/ ???????/*#box1 .wrap3{ ???????????color: green; ???????} ???????#box1 .wrap2{ ???????????color: red; ???????}*/ ???????????????#box1 .wrap2 .wrap3{ ????????????color: red !important; ???????} ???????.wrap1 #box2 .wrap3{ ???????????color: green; ???????} ???</style></head><body> ???????<!-- 当权重一样的 后来者居中 --> ???<div id=‘box1‘ class="wrap1"> ???????<div id="box2" class="wrap2"> ???????????<div id="box3" class="wrap3"> ???????????????<p style=‘‘>再来猜猜我是什么颜色？</p> ???????????</div> ???????</div> ???</div></body></html>技巧：
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
3.继承来的，描述的一样近，数权重
4.继承来的，描述的一样近，权重一样，后来者居上
26.前端css优先级以及继承
原文地址：https://www.cnblogs.com/LearningOnline/p/9085030.html