文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

超实用的三个CSS伪类,直接少些几十行CSS代码

2024-11-29 20:57

关注

一、:where

1.基本使用

:where()  CSS 伪类函数接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。

以下代码,文本都会变成 yellow 颜色:

:where(div p) span {
    color: yellow;
}

哈哈

哈哈

2.使用场景

其实 :where() 的功能本来就有,只不过有了它之后,实现起这些功能来就更加方便快捷~接下来就来讲讲它的组合/叠加功能。

我们来看下面的这段 css 代码:

div a:hover,
li a:hover,
.cla a:hover,
.aa .bb a:hover,
[class^='bold'] a:hover{
  color: yellow;
}

我们可以使用 :where()来简化这个写法,使用它找出 div li .cla 这三种选择器,选择器可以是标签,也可以是类名,也可以是选择器表达式:

:where(div, li, .cla, .a .b, [class^='bold']) a:hover {
    color:

再来看看使用 :where() 的组合,完成一些功能,我们看以下的代码:

.dark-theme button,
.dark-theme a,
.light-theme button,
.light-theme a{
 color: pink;
}

我们完全可以使用 :where() 简化这个写法:

:where(.dark-theme, light-theme) :where(button, a) {
    color: pink;
}

3.优先级

:where()的优先级是 0,我们可以看下面代码:

.test {
    color: yellow;
}
:where(.test) {
    color: pink
}

最后字体颜色是 yellow。

4.兼容性

全绿~

二、:is

:is()跟:where()可以说一模一样,区别就是 :is()的优先级不是0,而是由传入的选择器来决定的,拿刚刚的代码来举个例子:

div {
    color: yellow;
}
:where(.test) {
    color: pink
}

哈哈

这要是 :where(),那么字体颜色会是 yellow,因为它的优先级是 0。

但是如果是 :is()的话,字体颜色会是 pink,因为 类选择器 优先级比 标签选择器 优先级高~

:is(.test) {
    color: pink
}
div {
    color: yellow;
}

哈哈

兼容性

全绿~

三、:has

1.基本使用

举一个场景例子,我们看以下代码,一个容器中,图片是可以显隐的,我想要实现:

哈哈哈哈哈

如果按照以前的做法,就是使用 动态class 的方式去玩完成这个功能,但是现在有 :has()可以通过 css 的方式去完成这件事~

.container {
    font-size: 20px;
}
.container:has(img) {
    font-size: 12px;
}

或者
.container:has(.test-img) {
    font-size: 12px;
}

2.组合使用

现在又有两个场景:

我们可以这么去实现:

.container:has(>img) {
    font-size: 12px;
}

.container:has(+img) {
    color: red;
}

再来一个场景,当我 hover 到 子img 上时,我想要让 container 的字体变粗,可以这么去使用~

.container:has(>img:hover) {
    color: red;
}

3.兼容性

还是有一些浏览器不支持:

来源:前端之神内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯