找回密码
 立即注册

QQ登录

只需一步,快速开始

阿凡佬

中级会员

1

主题

14

帖子

525

积分

中级会员

积分
525
阿凡佬
中级会员   /  发表于:2022-4-25 13:43  /   查看:23305  /  回复:5
本帖最后由 阿凡佬 于 2022-4-26 19:42 编辑

通过前面几期格友的反馈,我发现部分格友还不知道怎么使用我分享的CSS代码,其实不用给单元格设置类名,只要把文件放到项目里,就自动生效了。

但这时候很多人就有疑问了,为什么呢?

我在这里给各位不太清楚原理的讲解一下,大佬请自动略过这段~~~~跳过这段是正文

------------------------------------分割线-----------------------------------------

浏览器在绘制每一个元素的时候,都会按照CSS文件定义的规则,将其以一个特定样式绘制在用户界面上。
而浏览器是如何判断某个样式是属于某个元素的呢?
我们来看下CSS的语法,其实非常简单:
  1. 选择器{
  2. 属性名 : 属性值 ;
  3. 属性名 : 属性值 ;
  4. }
复制代码

一个选择器,一堆属性和其对应的属性值,构成了一个CSS代码块,我们可以理解为一条样式规则。而选择器就是浏览器判断这条规则属于哪些元素的依据。比如
  1. body{
  2. background-color:black;
  3. }
复制代码
这样一条规则,就能把整个页面的背景设置为黑色。

但这时候问题来了,我把整个页面背景都设置成黑色,那这个页面里的其他元素怎么办呢?
浏览器当然不会这么笨,因此,它在为元素设置样式的时候,对每一条样式规则的选择器有一个优先级的判断:

!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

看晕了是不?其实很好理解
就比如这样一个结构
image.png261578673.png
然后写一个CSS
image.png258950194.png
一个 #sec{} ID选择器,自然比 .内层{} 类选择器优先级要高,所以浏览器会首先应用#sec选择器中的规则,没找到的规则,再去类选择器中去找。所以我们看到,sec这个div应用了ID选择器的规则,而fst和thd这两个div仍旧是类选择器中定义的规则
image.png395812377.png
但是在活字格的页面中,我们就没有那么自由了,HTML结构和CSS活字格已经帮我们写好了,因此若想覆盖它,我们必须把CSS的选择器描述得比活字格预定义的CSS选择器更详细。

我们现在假设,sec这个div已经由活字格预定义了,如何改变它的背景颜色呢?
再来看下优先级的排序
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
我们看到,在ID选择器前,还有两个选择器可以使用,行内样式和!important关键字
行内样式即HTML文档结构中定义的style属性,就是<div class="中间层" style="width: 180px;height: 180px;"> 中style="..."的部分,而我们也不可能更改活字格的HTML结构。留给我们的选项就只剩一种,即!important关键字
image.png745249023.png
image.png929061279.png
但这是最好的办法吗?
我们写代码其实还要考虑到未来的可维护性,万一哪天出现了一种特殊情况,而这时候!important关键字已经被使用过,而前面也没有优先级更高的选择器可以使用了,那我岂不是要重构前面的所有代码?(这里吐槽下横向菜单组件下拉窗口的z-index=100000/捂脸)  

所以不到万不得已的时候,我们绝不首先动用!important。

这时候我们就简单记住一句话:对一个元素描述得越详细的选择器的优先级越高。

什么意思呢?即使我前面已经用了#sec这个ID选择器,我只需要再写一条比它描述得更加详细的选择器,我就可以覆盖它
image.png586633910.png



同理,我们在活字格中写的CSS,只要比它预定义的CSS描述得更加精准,那么浏览器会先应用我们写的,从而达到“覆盖”的效果。因此,我前面分享的几期CSS美化专题,都是利用优先级的原理覆盖活字格原生的样式,所以我们不用给单元格写类名,只要把CSS文件放到项目中,就可以应用到发布的网页
test.html (1.23 KB, 下载次数: 895)

评分

参与人数 9金币 +1005 满意度 +35 收起 理由
sz_xd + 5
qtcxc + 5
一眼望天涯 + 5
robert + 5
Joe.xu + 5 很给力!
Simon.hu + 1000 牛掰~
amtath + 5
swejet + 5
谢厅 + 5

查看全部评分

5 个回复

倒序浏览
阿凡佬
中级会员   /  发表于:2022-4-25 13:43:41
沙发
回复 使用道具 举报
xiletianzi
中级会员   /  发表于:2024-10-8 13:29:26
板凳
感谢分享,这个确实需要美化
回复 使用道具 举报
xinxin512114
注册会员   /  发表于:4 天前
地板
感谢分享
回复 使用道具 举报
ZDYW悬赏达人认证 活字格认证
金牌服务用户   /  发表于:3 天前
87#
回复 使用道具 举报
ifro
注册会员   /  发表于:3 天前
88#
CSS就是比较繁琐,做好了确实也美观,谢谢作者的用心!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部