HTML+css(自学D4)作业，笔记与问题与解决方法

yc0205

B站教程：仿小米主页顶部菜单栏 ，
https://www.bilibili.com/video/BV1gs411c7AC?from=search&seid=11002248401216842643
蓝盘：作业，笔记与源码（有注释，你绝对看得明白。）
请下载D4压缩包
https://wws.lanzoui.com/b020hhmla
密码:6pmh
最强字典：https://www.w3school.com.cn/css/css_comments.asp
CSS网站布局：https://www.w3school.com.cn/css/css_website_layout.asp
这是今天的成果




CSS特异性：https://www.w3school.com.cn/css/css_specificity.asp  
可以解决我翻车问题，但还是看不太明白。。。

视频教程虽然只有几分钟，但是看懂代码，自己一步一步跟着做也能翻车。。无语到死也是遇到的问题

[Asm] 纯文本查看 复制代码

            <div class="topbar-nav">
                <a href="">小米商城</a><span>|</span>
</div>

[Asm] 纯文本查看 复制代码

.topbar-nav {
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 0;     》》》这儿字体大小都是0了为什么还能显示？？？
}

大佬能指点一下吗？
（以解决）
代码1

[Asm] 纯文本查看 复制代码

.topbar a {
    color: #b0b0b0;
    font-size: 12px;
}

代码2

[Asm] 纯文本查看 复制代码

.topbar-nav {
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 0;
}

代码3  

[Asm] 纯文本查看 复制代码

 <div class="topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="">小米商城</a><span>|</span>

代码1 代码2 同时作用在代码3   a标签上   最终那一个显示要看权重或者是CSS 特异性
（https://www.w3school.com.cn/css/css_specificity.asp）



更新9.3  “!important”  以及事例
=========================================================
CSS中“!important”可以使其之前的样式优先执行，例如：

[Asm] 纯文本查看 复制代码

body {

color : red !important;

}

body {

color : black;

}

颜色color出现了两次，而加上“!important”的“color : red;”总会得到优先执行，浏览器将对另一个“color : black;”视而不见。

zhetian9527

font-size: 0px !important  加个!important 就可以了

yc0205

zhetian9527 发表于 2021-9-2 15:38
font-size: 0px !important  加个!important 就可以了

!important  谢谢大佬
CSS中“!important”可以使其之前的样式优先执行，例如：

body {

color : red !important;

}

body {

color : black;

}

颜色color出现了两次，而加上“!important”的“color : red;”总会得到优先执行，浏览器将对另一个“color : black;”视而不见。

一线码农

别的样式 覆盖了呗。。。

yc0205

一线码农 发表于 2021-9-1 21:47
别的样式 覆盖了呗。。。

想的脑壳难受   字体大小为0了  那 div    topbar-nav 中的文字  小米商城  不是也会消失吗？

乔木自燃

看css这里

yc0205

乔木自燃 发表于 2021-9-1 22:00
看css这里

好像明白了，有一个优先级是吗？先把 topbar-nav 盒子内字体大小设为0 过会再通过 topbar最大的盒子把内部所有字大小变成12PX  是这个意思吗？或是这样理解对吗？

一线码农

yc0205 发表于 2021-9-1 22:15
好像明白了，有一个优先级是吗？先把 topbar-nav 盒子内字体大小设为0 过会再通过 topbar最大的盒子把内 ...

看图片
css 有权重计算的。

yc0205

一线码农 发表于 2021-9-1 22:20
看图片
css 有权重计算的。

好的我去看一下CSS权重的东西，谢谢大佬

bennyt

又来学习取经了。

xuepojie

也想学习呢

XiaoBai.Q.Q

大卡，学习一下