15 分钟带你感受 CSS :has() 选择器的强大

最新推荐文章于 2024-07-31 10:08:28 发布
最新推荐文章于 2024-07-31 10:08:28 发布
阅读量4.4k 收藏 30
点赞数 22
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdgfafg_25/article/details/137006174
版权

最近看到了许多关于 :has() 选择器的知识点，在此总结下来。

MDN 对 :has() 选择器 的解释是这样的：

CSS 函数式伪类  :has()  表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

下面一起来感受下 :has() 选择器的强大之处吧。

:has() 选择器选择父元素和前面的兄弟元素

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素：

p + img

通用兄弟关系选择器（~）用来选中一个元素后面的所有兄弟元素。例如，选中<p>元素之后的所有的<img>元素：

p ~ img

css 并没有提供直接选择父元素或者前面的兄弟元素的选择器，但 :has() 可以做到这点。

1、比如选择所有包含 <p>元素的父元素：

:has(p)

2、选择直接后代元素包含 <p>元素的父元素：

:has(> p)

3、选择直接后代元素包含 <p>元素的父级标签名是 div父元素：

div:has(> p)

4、选择 <p>元素的相邻的前一个标签名是 div的兄弟元素:

div:has(+ p)

5、选择 <p>元素的前面所有标签名是 div的兄弟元素:

div:has(~ p)

:has() 选择器中的 且 和 或

在 :has() 选择器中表示 且 和 或 很简单，例如：

p:has(.a):has(.b) 表示选择同时包含子元素 a 和 子元素 b 的 元素 p

p:has(.a, .b) 表示选择包含子元素 a 或者包含子元素 b 的 元素 p

:has() 选择器选择一个范围内的元素

现在有如下元素

<div>
  <h2>标题开始（选择第一行字体为绿色，最后一行字体为红色）</h2>
  <p>h2中间第一行</p>
  <h4>h2中间第二行</h4>
  <h5>h2中间最后一行</h5>
  <h2>标题结束</h2>
</div>

要求选择第一行字体为绿色，最后一行字体为红色。需要注意的是，中间元素可以是任意的。

cc.png

使用 :has() 实现上面效果，可以这么做

/* 选择 h2 中间第一行 */
h2 + :has(~ h2){
  color:green;
}
/* 选择 h2 中间最后一行 */
h2 ~ :has(+ h2){
  color:red;
}

h2 + :has(~ h2) 表示选择紧跟着 h2 的并且后面还有 h2 元素的兄弟元素。也就选择到了 h2 范围内的第一个元素。

h2 ~ :has(+ h2) 表示选择 h2 后面的兄弟元素，并且该兄弟元素的下一个兄弟元素是 h2，也就选择到了 h2 范围内最后一个元素

那如果要选择中间所有元素呢，可以这样做

dd.png

/* 选择 hr 中间所有行 */
hr ~ :has(~ hr){
  color:blue;
}

:has() 选择器的应用

1、CSS :has() 选择器之星级评分

关于星级评分，之前写过一篇文章分享过 三种方式使用纯 CSS 实现星级评分。

这里介绍下使用 :has() 选择器 + :not() 选择器 实现星级评分的方式。

星级评分效果包括鼠标滑入和点击，滑入或点击到第几颗星的位置，该位置之前的星高亮，之后的星不高亮或者有高亮的则取消高亮；

star.webp

html 结构

<div>
  <input type="radio" name="radio" id="radio1">
  <label for="radio1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio2">
  <label for="radio2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio3">
  <label for="radio3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio4">
  <label for="radio4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio5">
  <label for="radio5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
</div>

为了使星星有点击效果，利用 radio + label 的方式实现点击效果；label 代表星星。

当点击星星时，高亮当前星星

input:checked + label{
    color:gold;
}

当鼠标移入星星时，高亮当前星星，并且该位置之后的星星取消高亮；

label:hover{
  color:gold;
  & ~ label{
    color:#ccc!important;
  }
}

让当前位置之前的所有星星也高亮，可以利用 :not ，排除掉当前位置和当前位置之后的星星。

label:not(:hover,:hover ~ *){
  color:gold;
}

并且只有鼠标滑入时添加这些效果。

div:has(label:hover) label:not(:hover,:hover ~ *){
  color:gold;
}

同样，当点击星星时，点亮当前选择的之前所有的星星也如此

div:has(input:checked) label:not(input:checked ~ label){
  color:gold;
}

2、CSS :not 和 :has() 模拟 :only-of-type

有下面的 html 结构

<div>
  <p>第一页</p>
  <p class="this">第二页</p>
  <p>第三页</p>
  <p>第四页</p>
</div>

要选择类名为 this 的元素，并设置颜色为红色，使用 .this{color:red;} 可以轻松做到。

aa.png

如果现在有两个 div 元素块

<div>
  <p>第一页</p>
  <p class="this">第二页</p>
  <p>第三页</p>
  <p>第四页</p>
</div>

<div>
  <p>第一页</p>
  <p class="this">第二页</p>
  <p class="this">第三页</p>
  <p>第四页</p>
</div>

现要求选择 div 的子元素中只有含有一个类名为 this 的元素（也就是第一个 div 元素块），并且设置其颜色为红色，该怎么做呢？

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

但 :only-of-type 判断是否有相同类型的依据是标签名，而不是类名。所以并不能达到想要的效果。

//这种写法是无效的，无法判断元素有没有其他相同的类名。
.this:only-of-type {
    color:red;
}

//这种写法是有效的，但判断的是没有相同的 p 的元素，显然无法满足上面的要求，但能匹配下面 ul 中的 p
p:only-of-type {
    color:red;
}

<ul>
  <li>第一页</li>
  <li class="this">第二页</li>
  <li class="this">第三页</li>
  <p>第四页</p>
</ul>

而 :has 能做到，要选择前后没有相同类名的元素 ，也就是排除前后的 .this 。

排除前面的 .this

// 表示选择前面没有 .this 的 .this
.this:not(.this ~)

排除后面的 .this,

// 表示排除后面有 .this 的 .this
.this:not(:has(~ .this))

两个做并集，也就选择到了唯一的 .this

.this:not(:has(~ .this)):not(.this ~ *){
  color:red;
}

bb.png

3、CSS :has() 选择器之模仿 mac 电脑 dock 栏

利用 :has() 可以选择到前面的兄弟元素的特点，还能做出下面的动画效果

aa.gif

当鼠标滑入到一个元素时，该元素放大，该元素的前一个元素和后一个元素缩小，除了这三个元素之外的其他元素缩的更小并且有一定透明度；

html 结构如下

<div class="box">
  <div class="son">乔丹</div>
  <div class="son">科比</div>
  <div class="son">詹姆斯</div>
  <div class="son">奥尼尔</div>
  <div class="son">邓肯</div>
  <div class="son">卡特</div>
  <div class="son">麦迪</div>
  <div class="son">艾弗森</div>
  <div class="son">库里</div>
  <div class="son">杜兰特</div>
</div>

关键 css 代码

.son{
    ...
    ...
    ...
    &:hover{
      background-color:#67c23a;
      transform:scale(1.4);
      & + .son{
        transform:scale(1.1); // 后一个相邻的兄弟元素
      }
    }
  }

让前一个元素也缩放为原来的 1.1

// 选择存在 后一个相邻的被hover的兄弟元素 的元素
.son:has( + .son:hover){
  transform:scale(1.2);
}

然后对这三个元素之外的其他元素缩放为原来的 0.8

.box:has(.son:hover) .son:not(:hover, :has(+ :hover), .son:hover + *) {
  transform:scale(0.8);
  opacity:0.7;
}

.box:has(.son:hover) 表示选择子元素 son 被 hover 时的 .box

.son:not(:hover, :has(+ :hover), .son:hover + *) 表示排除 son 元素里面被 hover 的元素，被 hover 的元素的前一个邻接的兄弟元素，被 hover 的元素的后一个邻接的兄弟元素；

4、CSS :has() 选择器之单选题

bb.gif

这是个有趣的应用，当选择的是错误的选项时，选择题的标题和当前选择项标红。并且会给正确的选项添加动画效果提示用户这才是正确选项。

这里用 data-correct="false" 表示错误的选项，data-correct="true" 表示正确的选项。

<input type="radio" name="option" data-correct="false" id="option1" />
<label for="option1">Responsive design</label>

<input type="radio" name="option" data-correct="true" id="option2" />
<label for="option2">Responsive design</label>

<input type="radio" name="option" data-correct="false" id="option3" />
<label for="option3">Responsive design</label>

选择错误选项时，标红当前选项。选择正确选项时标绿当前选项。

.question{
  --correct: #5ed235; // 正确选项的颜色
  --wrong: #f83d56; // 错误选项的颜色
  --wrong-bg: rgba(248 ,61, 86,0.8);
  --correct-bg: rgb(94 ,210, 53,0.8);
}

input[data-correct="false"]:checked + label{
  color: #fff;
  background-color: var(--wrong);
  border-color: var(--wrong);
}
input[data-correct="true"]:checked + label{
  color: #fff;
  background-color: var(--correct);
  border-color: var(--correct);
}

选择错误选项时，标红标题； 这里用 :has 选择器获取子元素中有错误选项选中时。

.question:has(input[data-correct="false"]:checked) {
  .questionHeader {
    box-shadow: inset 0 7px 0 0 var(--wrong);
    background-color: var(--wrong-bg);
  }
}

并且给正确选项增加提示动画

.question:has(input[data-correct="false"]:checked) {
  input[data-correct="true"] + label {
    animation: flash 2s infinite;
  }
}

@keyframes flash {
  0% {
    background-color: white;
  }
  25% {
    background-color: #5ed235;
  }
  50% {
    background-color: white;
  }
  75% {
    background-color: #5ed235;
  }
  100% {
    background-color: white;
  }
}

选择正确选项时，标绿标题；

.question:has(input[data-correct="true"]:checked) {
  .questionHeader {
    box-shadow: inset 0 7px 0 0 var(--correct);
    background-color: var(--correct-bg);
  }
}

文章转载自：xingba-coder

原文链接：https://www.cnblogs.com/zsxblog/p/18093007

体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

液态不合群
关注
CSS 父选择器 :has()
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
12-11 7827
在CSS Selectors 4规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。
『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。
鱼头的Web海洋
07-21 824
作者：陈大鱼头 github： KRISACHAN 前言 CSS 选择器是 CSS 世界中非常重要的一环。 在 CSS 2 之后，所有的 CSS 属性都是按模块去维护的。 CSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。 下面让我们一起来看看 Level 4 新推出的一些选择器。 正文 下面我们按照类型来划分 逻辑组合（Logical Combinations）..
CSS :has() 选择器的使用
最新发布
浮游的博客
07-31 539
has() 选择器的引入，为CSS提供了更多的灵活性和强大的选择能力。通过上述实际应用案例，我们可以看到，:has() 选择器在处理复杂布局和动态内容时，能够提供更加精准和灵活的样式控制方案。随着浏览器支持度的提高，:has() 选择器的应用场景将会越来越广泛，为前端开发带来更多的可能性。
CSS is、where和has选择器
南城
07-10 779
is()和:where()伪类选择器简化了CSS语法。您将不需要嵌套和CSS预处理器（尽管这些工具提供了其他好处，如部分、循环和缩小）。:has()更具革命性和令人兴奋。父级选择将迅速流行起来，我们将忘记过去的黑暗时代！专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
【译】下一代选择器：CSS4
weixin_34007020的博客
06-15 250
2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。 由于Selectors Level 4 specification 目前已是工作草案状态，并且Edit...
CSS条件选择器:has()和:nth-last-child()
linanran1027的博客
05-19 458
列表有时候需要根据个数显示不同的样式，这时候，CSS条件选择器能帮上大忙！主要利用CSS伪类:has()和。
简单的聊一聊如何使用CSS的父类Has选择器
前端达人
10-18 1255
最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。它在CSS中是一个重要的...
jQuery中:has选择器用法实例
10-24
jQuery中的:has选择器是jQuery提供的一个过滤器选择器，它允许我们选取含有特定元素的父元素。这在我们需要对一组元素中的某些子元素进行特定操作时非常有用。 ### :has选择器功能和定义 :has选择器的工作原理是...
has-css-combinator:检查选择器是否具有组合器
05-18
检查选择器是否具有组合器。 安装 $ npm install has-css-combinator 用法 var hasCombinator = require ( 'has-css-combinator' ) hasCombinator ( '.foo+.bar' ) // true hasCombinator ( '.foo + .bar' ) // ...
CSS选择器
hi_Celia的博客
11-21 703
一、CSS的属性选择器 1、标签名[属性名]：选择含有给定属性的标签 /*选择带有title属性的div*/ div[title]{ color: red; font-size: 25px; } 2、标签名[属性名=值]：选择含有给定属性值的标签 /*选择带有title属性、并且title属性的值为hz的元素*/ div[title='hz']{ font-size: 35px; font-fa...
CSS父级选择器 :has()
热门推荐
小天才程序员的博客乐园
10-13 1万+
CSS父级选择器
css选择器
cqj0008的博客
12-29 309
1.css选择器的优先级及使用(1)css的三大特性: 继承 优先级 层叠 (2)css的选择器分类: 标签选择器 类选择器 ID选择器 全局选择器(*) 后代选择器 伪类选择器字符串匹配 选择器( $ * ^) 结尾 包含 开头 子选择器 相邻选择器 (3) 优先级不同 !important > 行内 > id > 类 > 标签 > 通配符 > 继承 > 浏览器自定义2.
CSS3选择器——2、层次选择器
夜子的专栏
02-14 6982
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 1411
一些在 Selectors Level 4 中新定义的选择器。 （前期不咋会用 markdown 排版，冏~~重新排一下·····）个人正在研究中的动效属性选择器不区分大小写之 i[attribute="value" i]，在 Selectors Level 4 中增强了属性选择器，添加一个 i 标识，让属性大小写不再敏感，例如 a[href$=”.pdf” i]：<a href="a.pdf">
css最最强大的伪类选择器：has选择器
PhoenixGuangyu的博客
10-24 362
has。
CSS 中的 :is(), :where(), 和 :has() 选择器简介
南城
01-31 655
在CSS的世界里，随着Web标准的不断发展，我们获得了更多强大的工具来帮助我们写出更简洁、高效的样式代码。:is():where(), 和:has()选择器正是这样一些工具，它们各自的特性和用法可以极大地提升我们的样式编写体验。让我们深入探讨这三个CSS选择器，并通过示例理解它们的应用。
css总结篇之选择器
weixin_57037336的博客
12-23 375
css总结篇之选择器 嘿嘿，马上就要放假了，这篇文章为今年对css的总结，这是第一篇，总结我认为的较为常用且有点难度的css选择器，后面会陆续总结css我认为的比较重要的内容。说到css选择器，写代码时往往会明明加了选择器写了样式却还是运行不出来的烦恼，那可能是忘记css选择器的优先级了。 css选择器的优先级； 内联样式(直接写在标签行内的)权重： 1000 ID选择器权重： 100 类选择器权重： 10 元素选择器权重：1 当权重一致时，离标签最近的样式选择器有效 6.不管有多少选择器累加，内联选择器
CSS :has伪类
橘猫吃不胖的博客
11-13 8210
CSS :has伪类 1 概述 2 实例说明 2.1 表单元素前面加* 2.2 拖拽列表 2.3 多层级hover 2.4 评星组件 3 兼容性
WebDriver' object has no attribute 'find element by css selector
09-01
这个错误提示说明你正在使用 WebDriver 对象，但是尝试调用了一个不存在的方法，即 `find_element_by_css_selector`。正确的方法名应该是 `find_element`，而选择器类型应为 `By.CSS_SELECTOR`。你可以尝试使用以下方式来定位元素： ```python from selenium import webdriver from selenium.webdriver.common.by import By driver = webdriver.Chrome() driver.get("https://example.com") element = driver.find_element(By.CSS_SELECTOR, "your_css_selector") ``` 请将 `"your_css_selector"` 替换为你要定位的具体 CSS 选择器。希望对你有帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值