CSS3新增的has伪类选择器,让你能轻松选择父元素

has选择器可以将其当做父级选择器来使用。尽管has选择器已经作为标准列入,但是大部分浏览器不支持。
它能支持在`谷歌105版本`及以上,火狐目前都不支持

CSS现在新增了一个允许我们选择父元素的伪类:has选择器。可以将其当做父级选择器。

一、语法

选择器1:has(选择器2){

}
/*
表示选择包含有选择器2的所有的选择器1
比如:*/
div:has(p) {
  background: black;
}

以上表示选择包含了img元素的所有的div标签,对应的HTML结构如下:

<div>
    <p>这里是p元素,但是选择的是div标签</p>
</div>

注意:以上结构div和p标签不一定是父子关系,只要是包含关系即可,如下面的也可以选中div:

<div>
    <section>
        <p>这里是p元素,但是选择的是div标签</p>
    </section>
</div>

二、链式操作

可以包含多个指定的选择器来作为过滤:

选择器1:has(选择器2):has(选择器3){

}
/* 
以上表示选择包含了选择器2和选择器3的所有的选择器1
比如:*/
div:has(p):has(#box) {
  background: green;
}

表示选择了所有的div元素,但是该div要包含有p标签和#box的元素。

对应的结构应该是这样:

<div>
    <section>
        <p>这里是p元素,但是选择的是div标签</p>
    </section>
    <div id='box'>
        box元素
    </div>
</div>

三、兼容性问题

尽管has选择器已经作为标准列入w3c中,但是大部分浏览器不支持。

它能支持在谷歌105版本及以上,火狐目前都不支持。

caniuse上的兼容性问题

可以点击这里https://caniuse.com/?search=has查看兼容性。

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 808
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top