前端小白会触犯的小禁区——第一弹、css的继承问题（为啥我没有给这个元素有任何的css命令，它却有了我不想要的样式？）

****1. 前端小白会触犯的小禁区——第一弹css的继承问题
经常会有前端的小白朋友问我，这个元素我没有给它设置这些样式啊，为什么它会自动出现啊？ 像这种不会报错的问题，有些时候对于前端刚入门的小白来说是很头疼的，也是容易忽略的问题——css的继承。
css的继承问题不外乎有以下几种常见的形式：
1、权重引起的继承问题：即选择同一范围内的相同元素，如给下方相同的元素设置样式时权重不够，那这个元素就会自动继承上一个样式。这是因为选中的元素权重值没有上一个元素权重高的问题。权重的计算为权值等级划分， 一般来说是划分4个等级：

第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；
　　　　css权重优先级
　　　　1.css选择规则的权值不同时，权值高的优先；

2.css选择规则的权值相同时，后定义的规则优先；

3. css属性后面加 !important 时，无条件绝对优先；
　　　（以上为借用“步杀一人千里不留行”的博客内容）
2、重点本文想要说的继承问题为书写类名时的漏写或少写类名中的一部分，导致元素样式向下持续起作用，如图


这里的举例是在权重值相同时的一种情况，同样属性的属性值可以被覆盖，如上图的字体颜色，但第一行字有的背景颜色，下面两行li没有设置背景颜色的需求，那么第一行的li样式就会被下面两行的li继承。在这种情况时，就算加大下面两个li的权重值也没有任何作用，跟权重没有关系，而是上方li的类名缺失，这时li的样式给到了content盒子中所有的li，除非你在用到下面li的时候，所设置的属性与上方的属性完全重合时，可以根据css的特性进行覆盖，然而正常的页面开发中，出现同一标签且在同一盒子的 不同位置，会有完全相同的属性的几率是很小的，这种小问题也不会产生报错，入门小白切记哦！不能完全以报错或者不起 作用来看，这个问题虽小，但在多层级嵌套的项目中出现，如果不注意书写方式，完全选中标签，这种 问题会持续的、大面积的出现，容易造成心理崩溃哦。
** 写在最后：**
各位要在开发注意细节往往大的方向都是没问题的，可能就因为一个算不上问题的问题，让你的项目时间拖延好几倍，给心理造成不必要的压力。
最后祝各位！键盘敲烂，月薪过万！（在杭州，第一份工作能达到一万就蛮好的了， 当然也会有很厉害的，能拿得到更高的，加油！）