马黑黑 发表于 2022-10-27 19:48

CSS伪类：匹配元素之 :is

本帖最后由 马黑黑 于 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 等样式设置。

红影 发表于 2022-10-27 20:17

权大的压死权小的，赋予一个较大的权，就可涵盖范围内所有的小兵，这个功能真棒{:4_187:}

马黑黑 发表于 2022-10-27 20:56

红影 发表于 2022-10-27 20:17
权大的压死权小的，赋予一个较大的权，就可涵盖范围内所有的小兵，这个功能真棒

伪类的设置还是挺有意思的

小辣椒 发表于 2022-10-27 20:57

这个不会操作{:4_203:}

马黑黑 发表于 2022-10-27 20:59

小辣椒 发表于 2022-10-27 20:57
这个不会操作

这个做帖子也基本用不上

小辣椒 发表于 2022-10-27 21:02

马黑黑 发表于 2022-10-27 20:59
这个做帖子也基本用不上

那最好，我基本按平时可以玩的制作一下{:4_189:}

马黑黑 发表于 2022-10-27 21:07

小辣椒 发表于 2022-10-27 21:02
那最好，我基本按平时可以玩的制作一下

CSS，JS，HTML，水深了去，弄懂几个常用的就好

小辣椒 发表于 2022-10-27 21:13

马黑黑 发表于 2022-10-27 21:07
CSS，JS，HTML，水深了去，弄懂几个常用的就好

可以玩几个帖就可以了{:4_170:}

马黑黑 发表于 2022-10-27 21:15

小辣椒 发表于 2022-10-27 21:13
可以玩几个帖就可以了

要求还真不高。不过我要告诉你，即便是做做帖子，知识扎实与否仍然是极其重要的

小辣椒 发表于 2022-10-27 21:16

马黑黑 发表于 2022-10-27 21:15
要求还真不高。不过我要告诉你，即便是做做帖子，知识扎实与否仍然是极其重要的

知道这个道理，但真的系统学习好像真的不太可能

马黑黑 发表于 2022-10-27 21:18

小辣椒 发表于 2022-10-27 21:16
知道这个道理，但真的系统学习好像真的不太可能

基本原理要懂的。比方说，你过去会用 align=center，但它现在已经不能用了，不合法，要有 style="text-align:center;"，或在对应的CSS盒子中设置 text-align:center; 等等。

小辣椒 发表于 2022-10-27 21:23

马黑黑 发表于 2022-10-27 21:18
基本原理要懂的。比方说，你过去会用 align=center，但它现在已经不能用了，不合法，要有 style="text-al ...

是的，我是最近在看看以前的制作，不一样了，但感觉以前的东西不玩还真容易忘记了{:4_170:}

马黑黑 发表于 2022-10-27 21:30

小辣椒 发表于 2022-10-27 21:23
是的，我是最近在看看以前的制作，不一样了，但感觉以前的东西不玩还真容易忘记了

以往，HTML4之时，大家这么玩，因为当时规则如此。现在css3和HTML5是规范，得用这个标准

小辣椒 发表于 2022-10-27 21:33

马黑黑 发表于 2022-10-27 21:30
以往，HTML4之时，大家这么玩，因为当时规则如此。现在css3和HTML5是规范，得用这个标准

反正跟着你玩了{:4_170:}，，，，

马黑黑 发表于 2022-10-27 21:43

小辣椒 发表于 2022-10-27 21:33
反正跟着你玩了，，，，

玩玩也好

红影 发表于 2022-10-27 22:23

马黑黑 发表于 2022-10-27 20:56
伪类的设置还是挺有意思的

好多没见过，只是在黑黑的介绍里见到一些。

马黑黑 发表于 2022-10-27 22:34

红影 发表于 2022-10-27 22:23
好多没见过，只是在黑黑的介绍里见到一些。

其实伪类也很常用，像锚的不同颜色：访问前、访问后，还有鼠标移动上面会变色

红影 发表于 2022-10-28 20:43

马黑黑 发表于 2022-10-27 22:34
其实伪类也很常用，像锚的不同颜色：访问前、访问后，还有鼠标移动上面会变色

常会想不到它们是伪类{:4_173:}

马黑黑 发表于 2022-10-28 21:30

红影 发表于 2022-10-28 20:43
常会想不到它们是伪类

它们就是伪类。伪类，按 @小辣椒 的说法，都是领导，因为伪类都带冒号——

#papa:hover

小辣椒 发表于 2022-10-28 22:01

马黑黑 发表于 2022-10-28 21:30
它们就是伪类。伪类，按 @小辣椒 的说法，都是领导，因为伪类都带冒号——

#papa:hover

{:4_170:}又是小辣椒的名言
页: [1] 2
查看完整版本: CSS伪类：匹配元素之 :is