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

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

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版本及以上,火狐目前都不支持。

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

如果你对web前端开发、面试感兴趣的话可以加V:imqdcnn。群里有各种学习资源发放,免费答疑,更有行业深潜多年的技术牛人分析讲解。

祝你能成为一名优秀的WEB前端开发工程师!

目录
打赏
0
相关文章
CSS:高级选择器
CSS:高级选择器
60 1
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
55 5
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
63 2
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
4月前
|
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
147 1
|
3月前
|
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
59 0
|
3月前
|
CSS常见的选择器
CSS常见的选择器
29 0