css最最强大的伪类选择器：has选择器

最新推荐文章于 2024-03-25 14:02:38 发布
最新推荐文章于 2024-03-25 14:02:38 发布
阅读量329 收藏
点赞数 1
文章标签： 1024程序员节 css 前端 vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phoenixguangyu/article/details/134007269
版权

:has 选择可以根据一个相对选择器来选中某个元素，如

  • div:has(p) 表示当 div 中有 p 时，选中 div
  • div:has(>p) 表示当 div 有子元素 p 时，选中 div
  • div:has(+p) 表示当 div 后面紧跟一个 p 时，选中 div
  • div:has(~p) 表示当 div 后续有 p 类型兄弟元素时，选中 div

注意上面的三个选择器都可以不使用 div 而直接使用 :has()

  • :has(p) 选中任何一个内部有 p 的元素
  • :has(>p) 选中任何一个有 p 子结点的元素
  • :has(+p) 选中任何一个后面紧跟 p 的元素
  • :has(~p) 选中任何一个后续 p 兄弟的元素
喝可乐的大喵
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS 父选择器 :has()
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
12-11 7676
在CSS Selectors 4规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。
CSS伪类选择器
Junran_Tan的博客
10-29 153
伪类选择器 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器 :link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */ a { /* a是标签选择器 所有的链接
15 分钟带你感受 CSS :has() 选择器的强大
最新发布
sdgfafg_25的博客
03-25 3160
最近看到了许多关于:has()选择器的知识点，在此总结下来。MDN 对:has()选择器 的解释是这样的：CSS 函数式:has()表示一个元素，如果作为参数传递的任何在锚定到该元素时，至少匹配一个元素。这个伪类通过把作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。下面一起来感受下:has()选择器的强大之处吧。:has()
【jQuery】:has(selector)过滤选择器
O(∩_∩)O
12-16 598
除了在上一小节介绍的使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。 例如：获取指定包含某个元素名的全部元素，并改变它们显示文字的颜色，如下图所示： 在浏览器中显示的效果： 可以看出，通过使用$("li:
CSS选择器
hi_Celia的博客
11-21 647
一、CSS的属性选择器 1、标签名[属性名]：选择含有给定属性的标签 /*选择带有title属性的div*/ div[title]{ color: red; font-size: 25px; } 2、标签名[属性名=值]：选择含有给定属性值的标签 /*选择带有title属性、并且title属性的值为hz的元素*/ div[title='hz']{ font-size: 35px; font-fa...
【译】下一代选择器：CSS4
weixin_34007020的博客
06-15 230
2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。 由于Selectors Level 4 specification 目前已是工作草案状态，并且Edit...
CSS is、where和has选择器
南城
07-10 654
is()和:where()伪类选择器简化了CSS语法。您将不需要嵌套和CSS预处理器（尽管这些工具提供了其他好处，如部分、循环和缩小）。:has()更具革命性和令人兴奋。父级选择将迅速流行起来，我们将忘记过去的黑暗时代！专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
jQuery中:has选择器用法实例
10-24
jQuery中的:has选择器是jQuery提供的一个过滤器选择器，它允许我们选取含有特定元素的父元素。这在我们需要对一组元素中的某些子元素进行特定操作时非常有用。 ### :has选择器功能和定义 :has选择器的工作原理是...
jQuery过滤选择器:not()方法使用介绍
10-26
随着时间的推移，`:not()`的功能得到了增强，现在它可以处理更复杂的表达式，包括组合选择器和更复杂的CSS选择器。例如，`$("div:not(diva, div.b)")`会选取所有不是`diva`或类为`b`的`div`元素。 下面是一些关于`:...
jquery属性选择器not has怎么写 行悬停高亮显示
10-26
1. `:not`选择器：它用于选取不匹配给定选择器的元素。该选择器的语法为`E:not(s)`，其中E是任何有效的选择器，s是用于匹配元素的简单选择器。在实际应用中，`E:not(s)`会选择所有非s的E元素。例如，`:not(.myclass)...
CSS父级选择器 :has()
热门推荐
小天才程序员的博客乐园
10-13 1万+
CSS父级选择器
css总结篇之选择器
weixin_57037336的博客
12-23 343
css总结篇之选择器 嘿嘿，马上就要放假了，这篇文章为今年对css的总结，这是第一篇，总结我认为的较为常用且有点难度的css选择器，后面会陆续总结css我认为的比较重要的内容。说到css选择器，写代码时往往会明明加了选择器写了样式却还是运行不出来的烦恼，那可能是忘记css选择器的优先级了。 css选择器的优先级； 内联样式(直接写在标签行内的)权重： 1000 ID选择器权重： 100 类选择器权重： 10 元素选择器权重：1 当权重一致时，离标签最近的样式选择器有效 6.不管有多少选择器累加，内联选择器
CSS :has伪类
coinisi_li的博客
08-29 962
has有时候我们会遇到一些场景，比如样式涉及到父子父子组件：我们使用了element-ui的Tree 树形控件，但是我们不希望使用其自带的样式，比如父级不希望有选中样式之类，中国社会科学院就可以用has。:has伪类的语法非常简单，表示满足一定条件后，就会匹配该元素。例如，下面的选择器只会匹配直接包含img子元素的a再例如，下面的选择器只会匹配其后紧跟着p元素的h1元素从形式上来看，去除:has()后，剩下的选择器仍然是完整的a>img加上:has()后，可以选中最前面的元素a。未完待续。。。。
CSS3选择器——2、层次选择器
夜子的专栏
02-14 6955
CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; margin: 0 auto; } div{ margin: 5px; padding: 5px; border: 1px solid #ccc; }
CSS 不为人知的 Selectors Level 4 中新定义的选择器
qq_33649233的博客
11-13 1386
一些在 Selectors Level 4 中新定义的选择器。 （前期不咋会用 markdown 排版，冏~~重新排一下·····）个人正在研究中的动效属性选择器不区分大小写之 i[attribute="value" i]，在 Selectors Level 4 中增强了属性选择器，添加一个 i 标识，让属性大小写不再敏感，例如 a[href$=”.pdf” i]：<a href="a.pdf">
jQuery :has() 选择器
我用键盘敲出一个世界
09-27 1644
选取所有包含有 元素在其内的 元素： $(“p:has(span)”)。 举例：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.mi
简单的聊一聊如何使用CSS的父类Has选择器
前端达人
10-18 1090
最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。它在CSS中是一个重要的...
html选择器控件,最新CSS4选择器前瞻
weixin_42504048的博客
06-03 168
2015年4月30日，W3C发布了最新的CSS选择器4级草案。在我们开始介绍这些新的CSS选择器之前，你必须要了解，这些选择器目前在绝大部分的浏览器中都是不可用的。因为这只是一份草案。这是4级CSS选择器的第四份草案，第一份草案是2011年开始起草的。草案中的新CSS选择器只是一种有W3C社区的开发人员提出的一些规范。也许在不久的将来，这些新的CSS4选择器会被实现，在Chrome或Firefox...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值