****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、重点**本文想要说的继承问题为书写类名时的漏写或少写类名中的一部分，导致元素样式向下持续起作用，如图![此图为原创，HTML的文件。这里的曾级很少，用来作为清晰的演示所用，实际开发中会有更多的7、8个或者更多的曾级嵌套，同时也会很容易引起继承问题。

      [该图为原创的嵌入式的css，在第一个li的样式设置时缺少其中一个类名的书写，导致第一行字体的绿色背景向下继续起作用，下面的li也无缘无故的成为了背锅侠。]

这里的举例是在权重值相同时的一种情况，同样属性的属性值可以被覆盖，如上图的字体颜色，但第一行字有的背景颜色，下面两行li没有设置背景颜色的需求，那么第一行的li样式就会被下面两行的li继承。在这种情况时，就算加大下面两个li的权重值也没有任何作用，跟权重没有关系，而是上方li的类名缺失，这时li的样式给到了content盒子中所有的li，除非你在用到下面li的时候，所设置的属性与上方的属性完全重合时，可以根据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、重点**本文想要说的继承问题为书写类名时的漏写或少写类名中的一部分，导致元素样式向下持续起作用，如图![此图为原创，HTML的文件。这里的曾级很少，用来作为清晰的演示所用，实际开发中会有更多的7、8个或者更多的曾级嵌套，同时也会很容易引起继承问题。

      [该图为原创的嵌入式的css，在第一个li的样式设置时缺少其中一个类名的书写，导致第一行字体的绿色背景向下继续起作用，下面的li也无缘无故的成为了背锅侠。]

这里的举例是在权重值相同时的一种情况，同样属性的属性值可以被覆盖，如上图的字体颜色，但第一行字有的背景颜色，下面两行li没有设置背景颜色的需求，那么第一行的li样式就会被下面两行的li继承。在这种情况时，就算加大下面两个li的权重值也没有任何作用，跟权重没有关系，而是上方li的类名缺失，这时li的样式给到了content盒子中所有的li，除非你在用到下面li的时候，所设置的属性与上方的属性完全重合时，可以根据css的特性进行覆盖，然而正常的页面开发中，出现同一标签且在同一盒子的 不同位置，会有完全相同的属性的几率是很小的，这种小问题也不会产生报错，入门小白切记哦！不能完全以报错或者不起 作用来看，这个问题虽小，但在多层级嵌套的项目中出现，如果不注意书写方式，完全选中标签，这种 问题会持续的、大面积的出现，容易造成心理崩溃哦。

**          写在最后：**

       各位要在开发注意细节往往大的方向都是没问题的，可能就因为一个算不上问题的问题，让你的项目时间拖延好几倍，给心理造成不必要的压力。

       最后祝各位！键盘敲烂，月薪过万！（在杭州，第一份工作能达到一万就蛮好的了， 当然也会有很厉害的，能拿得到更高的，加油！）