CSS:has()选择器

3790次阅读 291人点赞 作者: WuBin 发布时间: 2024-04-25 11:13:10
扫码到手机查看

基础讲解

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

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

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

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

p + img

通用兄弟关系选择器(~)用来选中一个元素后面的所有兄弟元素。例如,选中<p>元素之后的所有的<img>元素:

p ~ img

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

比如选择所有包含<p>元素的父元素:

:has(p)

选择直接后代元素包含<p>元素的父元素:

:has(> p)

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

div:has(> p)

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

div:has(+ p)

选择<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>

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

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

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

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

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

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

:has() 选择器的应用

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

在线效果:http://code.wubin.work/code/css/css-has/css-has-score-star.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" hljs-string">"><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" hljs-string">"><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" hljs-string">"><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" hljs-string">"><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" hljs-string">"><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;
}

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

在线效果:http://code.wubin.work/code/css/css-has/css-has-only-selector.html

<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>

<ul>
  <li>第一页</li>
  <li class="this">第二页</li>
  <li class="this">第三页</li>
  <p>第四页</p>
</ul>
div,ul{
  margin:40px;
}
p,li{
  margin:10px;
}

/* 前面的兄弟没有this类名  */
/* .this:not(.this ~ *){
  color:red;
} */


/* 后面的兄弟没有this类名 */
.this:not(:has(~ .this)){
  color:red;
}

/* 若存在多个this类名,则下面不生效,不会有红色字体 */
/* .this:not(:has(~ .this)):not(.this ~ *){
  color:red;
} */

/* :only-of-type 判断是否有相同类型的依据是**标签名**,而不是类名 */
p:only-of-type {
  color:red;
}

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

在线效果:http://code.wubin.work/code/css/css-has/css-has-mac-dock.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)表示选择子元素sonhover时的.box

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

:has() 选择器之单选题

在线效果:http://code.wubin.work/code/css/css-has/css-has-xuanzeti.html

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

这里用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);
  }
}

相关资料

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:css,has
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    9537次阅读 615人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    4210次阅读 310人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    14398次阅读 943人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    13404次阅读 482人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    11962次阅读 958人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    16282次阅读 1299人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    15130次阅读 1230人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    29760次阅读 2338人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    25801次阅读 1983人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录