css3伪类选择器 :has()

一、伪类选择器 :has()

今天给大家分享一下一个好用的伪类选择器 :has() 先看介绍

selector:has(relative-selector) { /* 样式规则 */ }

CSS3 的 :has() 伪类选择器是一个功能强大的选择器，它允许你根据元素的子元素或兄弟元素来选择元素。也就是说，:has() 让你可以基于元素内部的内容或相邻的元素来应用样式

简单直接明了的说一下 如何使用吧

在我们布局的时候呢 有些特殊情况下需要选择一个子元素的上一个兄弟元素但是我们的选择器中没有直接可以选择的，我们的运行是从上往下执行的可以选择一个元素的下一个元素或者说下一个子元素等等 但是我们又需要选择上一个兄弟怎么办呢？

今天在做一个小的project的时候用到了给大家分享一下

这是一个相当于相册旋转的案例用到HTML+CSS3的动画+3D

要求是hover的时候除自己元素之外其他元素有一定的遮罩层

代码：

主要使用

代码解释呢：~通用兄弟选择器 它们是兄弟嘛 然后 :has前面的是需要设置样式的元素可以理解为上一个兄弟元素 ()内呢就是你hover谁然后:has前面的元素生效很简单的理解.

selector:has(relative-selector) { /* 样式规则 */ }

• selector 是你想要应用样式的主元素。
• relative-selector 是相对于 selector 的选择器，可以是它的子元素、后代元素、兄弟元素等

在给大家举例子吧

简单例子 两个li标签 一个需要样式一个不需要

需求：

hover第二个的时候选中第一个并且改变颜色

代码

展示效果 这里由于截图工具的原因鼠标无法选中其实是hover第二个了 大家也可以试试

如何去理解呢？

前面这个是你需要增加样式也就是字体颜色的元素 是第二个li的的上一个兄弟元素

:has(这里意思是当你hover第二个元素的使用去找去设置你外部的第一个元素即为.item1)

注意的是你要选择上一个兄弟 必须 在()中 加上 + 或 ~ 表示 是 兄弟 

一个是通用兄弟选择一个是兄弟选择器 必须写否则会无效!

说的已经非常明白了哈 不仅可以找上一个兄弟元素 也可以兄弟的兄弟都是可以的 

好了今天的分享到此结束了不是很多但是 非常容易懂哈 喜欢的 点赞加关注 

                                                                                                    有疑问可私信 

                                                                                                             我是前端小关