A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 风吹秃头秀发飘 初级黑马   /  2019-6-7 22:50  /  1254 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

****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的特性进行覆盖,然而正常的页面开发中,出现同一标签且在同一盒子的 不同位置,会有完全相同的属性的几率是很小的,这种小问题也不会产生报错,入门小白切记哦!不能完全以报错或者不起 作用来看,这个问题虽小,但在多层级嵌套的项目中出现,如果不注意书写方式,完全选中标签,这种 问题会持续的、大面积的出现,容易造成心理崩溃哦。
**          写在最后:**
       各位要在开发注意细节往往大的方向都是没问题的,可能就因为一个算不上问题的问题,让你的项目时间拖延好几倍,给心理造成不必要的压力。
       最后祝各位!键盘敲烂,月薪过万!(在杭州,第一份工作能达到一万就蛮好的了, 当然也会有很厉害的,能拿得到更高的,加油!)

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马