HTML+css(自学D4)作业，笔记与问题与解决方法
本帖最后由 yc0205 于 2021-9-3 09:56 编辑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
可以解决我翻车问题，但还是看不太明白。。。
视频教程虽然只有几分钟，但是看懂代码，自己一步一步跟着做也能翻车。。无语到死也是遇到的问题
<div class="topbar-nav">
<a href="">小米商城</a><span>|</span>
</div>
.topbar-nav {
float: left;
height: 40px;
line-height: 40px;
font-size: 0; 》》》这儿字体大小都是0了为什么还能显示？？？
}
大佬能指点一下吗？
（以解决）
代码1
.topbar a {
color: #b0b0b0;
font-size: 12px;
}
代码2
.topbar-nav {
float: left;
height: 40px;
line-height: 40px;
font-size: 0;
}
代码3
<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”可以使其之前的样式优先执行，例如：body {
color : red !important;
}
body {
color : black;
}颜色color出现了两次，而加上“!important”的“color : red;”总会得到优先执行，浏览器将对另一个“color : black;”视而不见。
font-size: 0px !important加个!important 就可以了
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;”视而不见。 别的样式 覆盖了呗。。。 一线码农 发表于 2021-9-1 21:47
别的样式 覆盖了呗。。。
想的脑壳难受 字体大小为0了那 div topbar-nav 中的文字小米商城不是也会消失吗？
看css这里 乔木自燃 发表于 2021-9-1 22:00
看css这里
好像明白了，有一个优先级是吗？先把 topbar-nav 盒子内字体大小设为0 过会再通过 topbar最大的盒子把内部所有字大小变成12PX是这个意思吗？或是这样理解对吗？ yc0205 发表于 2021-9-1 22:15
好像明白了，有一个优先级是吗？先把 topbar-nav 盒子内字体大小设为0 过会再通过 topbar最大的盒子把内 ...
看图片
css 有权重计算的。 一线码农 发表于 2021-9-1 22:20
看图片
css 有权重计算的。
好的我去看一下CSS权重的东西，谢谢大佬 又来学习取经了。 也想学习呢 大卡，学习一下