: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中的且 -
