|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-10-27 21:09 编辑
有位朋友,临时受命,在明天之前处理好所有的OA页面,具体任务是:将OA所有文档标题全部或部分标红的文字全部改为黑色。
朋友用JS写了个程序,挂载在所有页面都会使用的JS文档里,效果还不错,但是总感觉是杀鸡用了牛刀,就把代码发给我帮忙瞧瞧,顺便看看哪里可以优化一下。
看完代码,我知道,朋友要处理的有三种情况:
① h1 至 h5 的标题,直接用了 style 内联式(行内)属性标上颜色;
② h1 至 h5 的标题,使用 span 标签给部分文本标颜色;
③ 上述两种情况合并使用。
处理这样的问题,用JS处理也不是什么杀鸡用牛刀的事,完全可以的。不过CSS有更绝妙的处理方法:
:is(h1, h2, h3, h4, h5), :is(h1, h2, h3, h4, h5) span { color: black !important; }
解释一下:
:is 是 CSS 的一个伪类,是肯定式匹配 —— is 是”是“的意思,那么,:is(h1),就是”是h1“标签,多个标签也放在括号里,用逗号隔开;:is(h1) span,就是”是h1的span“标签的意思,同样支持多个标签的 span。这是第一步:匹配特定标签及特定标签下的标签。
第二步:!important 加在属性设置之后,意为为该属性改变规则,提升其权重,覆盖所有的样式设置。通常,style内联式设置优先权最高,但它敌不过加了 !important 的属性,这是将能覆盖一切的属性。
上述 :is(...) ... 方法,运行时没有任何延时,因为浏览器根本就不会去理睬 h1 - h5 标签的任何 style 和 span 等样式设置。
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|