:has()伪类是一个功能非常强大的伪类，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能
:has()的语法和作用
:has()里面是选择子级的选择器，通过这个子级的选择器来选择前面的选择器的父级
1. 通过子元素查找或者控制父元素
通过p标签hover，来选择.box的父级元素，控制其css
<style>
/* 子元素控制父元素 */
.box:has(p:hover){
font-size:12px;
color:red;
}
</style>
<div class="box">
<p>div里的p标签文字</p>
</div>2. 通过子元素查找或者控制父元素后面的兄弟元素
通过p标签hover，来选择.box的父级元素后面的兄弟元素，控制其css
<style>
/* 子元素控制或者查找父元素后面的兄弟元素 */
.box:has(p:hover) ~ p{
font-size:12px;
color:red;
}
</style>
<div class="box">
<p>div里的p标签文字</p>
</div>
<p>兄弟元素p标签一行文字</p>
<p>兄弟元素p标签一行文字</p>3. 控制或者查找前面的兄弟元素
<style>
/* 控制或者查找前面的兄弟元素 */
div:has(+.box){
font-size:12px;
color:red;
}
</style>
<div class="div1">
<p>第三行文字div里的p标签</p>
</div>
<div class="box">
<p>div里的p标签文字</p>
</div>4. 子元素控制或者查找父元素前面的兄弟元素
通过这种方法，理论上来讲页面中任意DOM变化都可以被其他DOM元素感知到
<style>
/* 子元素控制或者查找父元素前面的兄弟元素 */
body:has(.box p:hover) .div1{
font-size:12px;
color:red;
}
</style>
<div class="div1">
<p>第三行文字div里的p标签</p>
</div>
<div class="box">
<p>div里的p标签文字</p>
</div>5. has中的或与且
5.1 has中的或，表示div中只要有h3或者p标签，都可以匹配到
<style>
/* 表示div中只要有h3或者p标签，都可以匹配到 */
div:has(h3,p){
font-size:12px;
color:red;
}
</style>
<div class="div1">
<p>第三行文字div里的p标签</p>
</div>
<div class="box">
<p>div里的p标签文字</p>
</div>5.2 has中的且，表示div中必须有h3并且有p标签，都可以匹配到
<style>
/* 表示div中必须有h3并且有p标签，都可以匹配到 */
div:has(h3):has(p){
font-size:12px;
color:red;
}
</style>
<div class="div1">
<p>第三行文字div里的p标签</p>
</div>
<div class="box">
<p>div里的p标签文字</p>
</div>结尾
其中某些章节亲自验证可用，其余未全部验证。