首页新闻动态正文

css的继承问题【黑马web前端】

更新时间:2019年07月26日 11时16分24秒 来源:黑马程序员论坛

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

推荐了解热门学科

java培训 Python人工智能 Web前端培训 PHP培训
区块链培训 影视制作培训 C++培训 产品经理培训
UI设计培训 新媒体培训 产品经理培训 Linux运维
大数据培训 智能机器人软件开发




传智播客是一家致力于培养高素质软件开发人才的科技公司“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来,教学研发团队一直致力于打造精品课程资源,不断在产、学、研3个层面创新自己的执教理念与教学方针,并集中“黑马程序员”的优势力量,针对性地出版了计算机系列教材50多册,制作教学视频数+套,发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到,“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员,具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示,“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验,从而多出了更多的项目经验。“为此,传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家,集中研发面向中高级程序员的课程,用以满足企业用人需求,尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程,是在当前主流的初级程序员课程的基础上,增加多领域多行业的含金量项目,从技术的广度和深度上进行拓展“我们希望用5年的时间,打造上百个高含金量的项目,覆盖主流的32个行业。”传智播客课程研发总监于洋表示。




黑马程序员热门视频教程【点击播放】

Python入门教程完整版(懂中文就能学会) 零起点打开Java世界的大门
C++| 匠心之作 从0到1入门学编程 PHP|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript 软件测试入门到精通


在线咨询 我要报名
和我们在线交谈!