1. 場景還原
在實際開發(fā)中，我們可能會遇到控制前面兄弟元素樣式的場景。例如下面的HTML世剖，我們需要在不修改HTML內容的前提下將內容1前面的標題1設置為天藍色，直接給.title設置樣式肯定不行族购，會影響標題2的顏色鼻听，在CSS選擇器中也沒有提供前面兄弟選擇符，此時應該怎么做联四？
<h2 class="title">標題1</h2>
<div class="content">內容1</div>
<h2 class="title">標題2</h2>
<p>內容2</p>
如果項目對兼容性要求不高撑碴，可以用2022年才開始支持的新的關聯(lián)偽類:has()：
下面的CSS代碼表示選擇具有 title 類的元素，并且這些元素的下一個相鄰兄弟元素是一個具有 content 類的元素朝墩。
.title:has(+ .content) {
? color: skyblue;
}
此時的標題1就設置成了天藍色醉拓，標題2并未受影響
2. :has偽類介紹
兼容性
:has偽類是Safari瀏覽器在2022年才開始支持的，Chrome105 版本以后也支持收苏，IE全版本均不支持亿卤，請勿使用在需要兼容IE的實際項目中，具體兼容版本可以參考鏈接：https://caniuse.com/?search=%3Ahas
語法
:has()偽類的通用語法支持各種類型的選擇器和復雜的選擇器組合鹿霸。其基本語法如下：
選擇器1:has(選擇器2) {
}
選擇器1: 是你想要選擇的前面元素的選擇器排吴。
選擇器2: 是你想要選擇的后面元素的選擇器。
可以這樣理解：如果選擇器1匹配到選擇器2懦鼠，則能匹配到選擇器1
例如下面的CSS代碼表示如果<a>元素(選擇器1)里面有（匹配）<img>元素（選擇器2），則<a>元素（選擇器1）就匹配
a:has(img) {
? ? display: block;
}
:has()偽類支持所有CSS選擇符（選擇符放在最前面）肛冶，例如：
a:has(> img) {
? ? display: block;
}
表示子元素是<img>元素的<a>元素會被匹配 ，實現(xiàn)了父選擇器的效果
:has()偽類的優(yōu)先級為0睦袖，優(yōu)先級由括號里的選擇器決定。
示例
下面是一些:has()偽類示例馅笙，請結合實際應用場景使用：
1. 選擇包含至少一個 <li> 元素的 <ul> 元素：
ul:has(li) {
? /* 樣式 */
}
2. 選擇包含類名為 .highlight 的子元素的父元素：
div:has(> .highlight) {
? ? /* 樣式 */
}
3. 選擇包含 <span> 或 <a> 元素的父元素（OR）：
div:has(span, a) {
? ? /* 樣式 */
}
4. 選擇同時包含 <span> 和 <a> 元素的父元素（AND）：
div:has(span):has(a) {
? ? /* 樣式 */
}
