:has()伪类是一个功能非常强大的伪类，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能
:has()的语法和作用
:has()里面是选择子级的选择器，通过这个子级的选择器来选择前面的选择器的父级
-
通过子元素查找或者控制父元素
通过p标签hover，来选择.box的父级元素，控制其css<style> /* 子元素控制父元素 */ .box:has(p:hover){ font-size:12px; color:red; } </style> <div class="box"> <p>div里的p标签文字</p> </div>子元素控制父元素 -
通过子元素查找或者控制父元素后面的兄弟元素
通过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>子元素控制或者查找父元素后面的兄弟元素 -
控制或者查找前面的兄弟元素
<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>控制或者查找前面的兄弟元素 -
子元素控制或者查找父元素前面的兄弟元素
通过这种方法，理论上来讲页面中任意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>子元素控制或者查找父元素前面的兄弟元素 -
has中的或与且-
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>has中的或-
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>has中的且 -
