MDN 對(duì) :has() 選擇器 的解釋是這樣的：
CSS 函數(shù)式偽類 :has() 表示一個(gè)元素，如果作為參數(shù)傳遞的任何相對(duì)選擇器在錨定到該元素時(shí)，至少匹配一個(gè)元素。這個(gè)偽類通過(guò)把可容錯(cuò)相對(duì)選擇器列表作為參數(shù)，提供了一種針對(duì)引用元素選擇父元素或者先前的兄弟元素的方法。
下面一起來(lái)感受下 :has() 選擇器的強(qiáng)大之處吧。
:has() 選擇器選擇父元素和前面的兄弟元素
鄰接兄弟選擇器（+）用來(lái)選中恰好處于另一個(gè)在繼承關(guān)系上同級(jí)的元素旁邊的物件。例如，選中所有緊隨<p>元素之后的<img>元素：
p + img
通用兄弟關(guān)系選擇器（~）用來(lái)選中一個(gè)元素后面的所有兄弟元素。例如，選中<p>元素之后的所有的<img>元素：
p ~ img
css 并沒(méi)有提供直接選擇父元素或者前面的兄弟元素的選擇器，但 :has() 可以做到這點(diǎn)。
1、比如選擇所有包含 <p>元素的父元素：
:has(p)
2、選擇直接后代元素包含 <p>元素的父元素：
:has(> p)
3、選擇直接后代元素包含 <p>元素的父級(jí)標(biāo)簽名是 div父元素：
div:has(> p)
4、選擇 <p>元素的相鄰的前一個(gè)標(biāo)簽名是 div的兄弟元素:
div:has(+ p)
5、選擇 <p>元素的前面所有標(biāo)簽名是 div的兄弟元素:
div:has(~ p)
:has() 選擇器中的 且 和 或
在 :has() 選擇器中表示 且 和 或 很簡(jiǎn)單，例如：
p:has(.a):has(.b) 表示選擇同時(shí)包含子元素 a 和 子元素 b 的 元素 p
p:has(.a, .b) 表示選擇包含子元素 a 或者包含子元素 b 的 元素 p
:has() 選擇器選擇一個(gè)范圍內(nèi)的元素
現(xiàn)在有如下元素
<div>
<h2>標(biāo)題開始（選擇第一行字體為綠色，最后一行字體為紅色）</h2>
<p>h2中間第一行</p>
<h4>h2中間第二行</h4>
<h5>h2中間最后一行</h5>
<h2>標(biāo)題結(jié)束</h2>
</div>
要求選擇第一行字體為綠色，最后一行字體為紅色。需要注意的是，中間元素可以是任意的。
使用 :has() 實(shí)現(xiàn)上面效果，可以這么做
h2 + :has(~ h2){
color:green;
}
h2 ~ :has(+ h2){
color:red;
}
h2 + :has(~ h2) 表示選擇緊跟著 h2 的并且后面還有 h2 元素的兄弟元素。也就選擇到了 h2 范圍內(nèi)的第一個(gè)元素。
h2 ~ :has(+ h2) 表示選擇 h2 后面的兄弟元素，并且該兄弟元素的下一個(gè)兄弟元素是 h2，也就選擇到了 h2 范圍內(nèi)最后一個(gè)元素
那如果要選擇中間所有元素呢，可以這樣做
hr ~ :has(~ hr){
color:blue;
}
:has() 選擇器的應(yīng)用
1、CSS :has() 選擇器之星級(jí)評(píng)分
關(guān)于星級(jí)評(píng)分，之前寫過(guò)一篇文章分享過(guò) 三種方式使用純 CSS 實(shí)現(xiàn)星級(jí)評(píng)分。
這里介紹下使用 :has() 選擇器 + :not() 選擇器 實(shí)現(xiàn)星級(jí)評(píng)分的方式。
星級(jí)評(píng)分效果包括鼠標(biāo)滑入和點(diǎn)擊，滑入或點(diǎn)擊到第幾顆星的位置，該位置之前的星高亮，之后的星不高亮或者有高亮的則取消高亮；
html 結(jié)構(gòu)
<div>
<input type="radio" name="radio" id="radio1">
<label for="radio1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
</label>
<input type="radio" name="radio" id="radio2">
<label for="radio2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
</label>
<input type="radio" name="radio" id="radio3">
<label for="radio3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
</label>
<input type="radio" name="radio" id="radio4">
<label for="radio4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
</label>
<input type="radio" name="radio" id="radio5">
<label for="radio5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
</label>
</div>
為了使星星有點(diǎn)擊效果，利用 radio + label 的方式實(shí)現(xiàn)點(diǎn)擊效果；label 代表星星。
當(dāng)點(diǎn)擊星星時(shí)，高亮當(dāng)前星星
input:checked + label{
color:gold;
}
當(dāng)鼠標(biāo)移入星星時(shí)，高亮當(dāng)前星星，并且該位置之后的星星取消高亮；
label:hover{
color:gold;
& ~ label{
color:#ccc!important;
}
}
讓當(dāng)前位置之前的所有星星也高亮，可以利用 :not ，排除掉當(dāng)前位置和當(dāng)前位置之后的星星。
label:not(:hover,:hover ~ *){
color:gold;
}
并且只有鼠標(biāo)滑入時(shí)添加這些效果。
div:has(label:hover) label:not(:hover,:hover ~ *){
color:gold;
}
同樣，當(dāng)點(diǎn)擊星星時(shí)，點(diǎn)亮當(dāng)前選擇的之前所有的星星也如此
div:has(input:checked) label:not(input:checked ~ label){
color:gold;
}
完整示例
2、CSS :not 和 :has() 模擬 :only-of-type
有下面的 html 結(jié)構(gòu)
<div>
<p>第一頁(yè)</p>
<p class="this">第二頁(yè)</p>
<p>第三頁(yè)</p>
<p>第四頁(yè)</p>
</div>
要選擇類名為 this 的元素，并設(shè)置顏色為紅色，使用 .this{color:red;} 可以輕松做到。
如果現(xiàn)在有兩個(gè) div 元素塊
<div>
<p>第一頁(yè)</p>
<p class="this">第二頁(yè)</p>
<p>第三頁(yè)</p>
<p>第四頁(yè)</p>
</div>
<div>
<p>第一頁(yè)</p>
<p class="this">第二頁(yè)</p>
<p class="this">第三頁(yè)</p>
<p>第四頁(yè)</p>
</div>
現(xiàn)要求選擇 div 的子元素中只有含有一個(gè)類名為 this 的元素（也就是第一個(gè) div 元素塊），并且設(shè)置其顏色為紅色，該怎么做呢？
:only-of-type 代表了任意一個(gè)元素，這個(gè)元素沒(méi)有其他相同類型的兄弟元素。
但 :only-of-type 判斷是否有相同類型的依據(jù)是標(biāo)簽名，而不是類名。所以并不能達(dá)到想要的效果。
//這種寫法是無(wú)效的，無(wú)法判斷元素有沒(méi)有其他相同的類名。
.this:only-of-type {
color:red;
}
//這種寫法是有效的，但判斷的是沒(méi)有相同的 p 的元素，顯然無(wú)法滿足上面的要求，但能匹配下面 ul 中的 p
p:only-of-type {
color:red;
}
<ul>
<li>第一頁(yè)</li>
<li class="this">第二頁(yè)</li>
<li class="this">第三頁(yè)</li>
<p>第四頁(yè)</p>
</ul>
而 :has 能做到，要選擇前后沒(méi)有相同類名的元素 ，也就是排除前后的 .this 。
排除前面的 .this
.this:not(.this ~)
排除后面的 .this,
.this:not(:has(~ .this))
兩個(gè)做并集，也就選擇到了唯一的 .this
.this:not(:has(~ .this)):not(.this ~ *){
color:red;
}
完整示例
利用 :has() 可以選擇到前面的兄弟元素的特點(diǎn)，還能做出下面的動(dòng)畫效果
當(dāng)鼠標(biāo)滑入到一個(gè)元素時(shí)，該元素放大，該元素的前一個(gè)元素和后一個(gè)元素縮小，除了這三個(gè)元素之外的其他元素縮的更小并且有一定透明度；
html 結(jié)構(gòu)如下
<div class="box">
<div class="son">喬丹</div>
<div class="son">科比</div>
<div class="son">詹姆斯</div>
<div class="son">奧尼爾</div>
<div class="son">鄧肯</div>
<div class="son">卡特</div>
<div class="son">麥迪</div>
<div class="son">艾弗森</div>
<div class="son">庫(kù)里</div>
<div class="son">杜蘭特</div>
</div>
關(guān)鍵 css 代碼
.son{
...
...
...
&:hover{
background-color:#67c23a;
transform:scale(1.4);
& + .son{
transform:scale(1.1); // 后一個(gè)相鄰的兄弟元素
}
}
}
讓前一個(gè)元素也縮放為原來(lái)的 1.1
// 選擇存在 后一個(gè)相鄰的被hover的兄弟元素 的元素
.son:has( + .son:hover){
transform:scale(1.2);
}
然后對(duì)這三個(gè)元素之外的其他元素縮放為原來(lái)的 0.8
.box:has(.son:hover) .son:not(:hover, :has(+ :hover), .son:hover + *) {
transform:scale(0.8);
opacity:0.7;
}
.box:has(.son:hover) 表示選擇子元素 son 被 hover 時(shí)的 .box
.son:not(:hover, :has(+ :hover), .son:hover + *) 表示排除 son 元素里面被 hover 的元素，被 hover 的元素的前一個(gè)鄰接的兄弟元素，被 hover 的元素的后一個(gè)鄰接的兄弟元素；
完整示例
4、CSS :has() 選擇器之單選題
這是個(gè)有趣的應(yīng)用，當(dāng)選擇的是錯(cuò)誤的選項(xiàng)時(shí)，選擇題的標(biāo)題和當(dāng)前選擇項(xiàng)標(biāo)紅。并且會(huì)給正確的選項(xiàng)添加動(dòng)畫效果提示用戶這才是正確選項(xiàng)。
這里用 data-correct="false" 表示錯(cuò)誤的選項(xiàng)，data-correct="true" 表示正確的選項(xiàng)。
<input type="radio" name="option" data-correct="false" id="option1" />
<label for="option1">Responsive design</label>
<input type="radio" name="option" data-correct="true" id="option2" />
<label for="option2">Responsive design</label>
<input type="radio" name="option" data-correct="false" id="option3" />
<label for="option3">Responsive design</label>
選擇錯(cuò)誤選項(xiàng)時(shí)，標(biāo)紅當(dāng)前選項(xiàng)。選擇正確選項(xiàng)時(shí)標(biāo)綠當(dāng)前選項(xiàng)。
.question{
--correct: #5ed235; // 正確選項(xiàng)的顏色
--wrong: #f83d56; // 錯(cuò)誤選項(xiàng)的顏色
--wrong-bg: rgba(248 ,61, 86,0.8);
--correct-bg: rgb(94 ,210, 53,0.8);
}
input[data-correct="false"]:checked + label{
color: #fff;
background-color: var(--wrong);
border-color: var(--wrong);
}
input[data-correct="true"]:checked + label{
color: #fff;
background-color: var(--correct);
border-color: var(--correct);
}
選擇錯(cuò)誤選項(xiàng)時(shí)，標(biāo)紅標(biāo)題； 這里用 :has 選擇器獲取子元素中有錯(cuò)誤選項(xiàng)選中時(shí)。
.question:has(input[data-correct="false"]:checked) {
.questionHeader {
box-shadow: inset 0 7px 0 0 var(--wrong);
background-color: var(--wrong-bg);
}
}
并且給正確選項(xiàng)增加提示動(dòng)畫
.question:has(input[data-correct="false"]:checked) {
input[data-correct="true"] + label {
animation: flash 2s infinite;
}
}
@keyframes flash {
0% {
background-color: white;
}
25% {
background-color: #5ed235;
}
50% {
background-color: white;
}
75% {
background-color: #5ed235;
}
100% {
background-color: white;
}
}
選擇正確選項(xiàng)時(shí)，標(biāo)綠標(biāo)題；
.question:has(input[data-correct="true"]:checked) {
.questionHeader {
box-shadow: inset 0 7px 0 0 var(--correct);
background-color: var(--correct-bg);
}
}
完整示例
總結(jié)
本文介紹了 :has() 選擇器的基本用法以及四個(gè)實(shí)際應(yīng)用；
- 選擇父元素和前面的兄弟元素
:has() 選擇器中的 且 和 或- 選擇一個(gè)范圍內(nèi)的元素
在 :has() 選擇器出來(lái)之前，使用 CSS 是無(wú)法直接選擇到父級(jí)元素和前面的兄弟元素的，但 :has() 選擇器的出現(xiàn)使這個(gè)變成了可能；
?轉(zhuǎn)自https://www.cnblogs.com/zsxblog/p/18093007
該文章在 2025/1/18 10:29:50 編輯過(guò)
400 186 1886
