大家好，我是 CUGGZ。
你有沒有想過使用CSS選擇器來檢查父元素中是否存在特定的元素？例如，如果一個卡片組件中有圖片，就給它添加一個display:flex。這以前在CSS中是無法實現(xiàn)的，而全新的 CSS 選擇器:has就可以幫助我們選擇包含特定元素的父元素。下面來看看這個全新的 CSS 選擇器吧！
:has 選擇器概述
在CSS中，我們無法根據(jù)元素中是否存在特定的元素來設置父元素的樣式，要想實現(xiàn)這一點，就必須創(chuàng)建CSS類，并根據(jù)需要進行類的切換。來看下面的例子：
這里有兩種卡片：包含圖片和不包含圖片。在CSS中需要這樣做：
/* 有圖片的卡片 */
.card {
display: flex;
align-items: center;
gap: 1rem;
}
/* 沒有圖片的卡片 */
.card-plain {
display: block;
border-top: 3px solid #7c93e9;
}
<!-- 有圖片的卡片 -->
<div class="card">
<div class="card-image">
<img src="awameh.jpg" alt="">
</div>
<div class="card-content">
卡片內容
</div>
</div>
<!-- 沒有圖片的卡片 -->
<div class="card card-plain">
<div class="card-content">
卡片內容
</div>
</div>
這里創(chuàng)建了一個類card-plain，專門用于沒有圖片的卡片，在沒有圖片時就不需要flex布局。如果使用 CSS 中的父選擇器 :has 就不需要再寫這個類，只需要使用它來檢查卡片中是否包含.card-image即可：
.card:has(.card-image) {
display: flex;
align-items: center;
}?根據(jù) CSS 規(guī)范，:has 選擇器可以檢查父元素是否包含至少一個元素，或者一個條件，例如輸入是否獲取到焦點。
:has 選擇器不僅可以檢查父元素是否包含特定的子元素，還可以檢查一個元素后面是否跟有另一個元素：
這將檢查 <h2> 元素是否直接跟在 <p> 元素之后。
我們也可以將它與表單元素一起使用來檢查輸入是否獲取到了焦點：
form:has(input:focused) {
background-color: lightgrey;
}:has 選擇器使用示例
下面來看看一些使用:has選擇器實現(xiàn)頁面效果的案例吧！
1、標題樣式
當處理章節(jié)標題時有兩種情況，一種是只包含標題，另一種包含標題和鏈接。
根據(jù)是否有鏈接來定義不同的樣式：
<section>
<div class="section-header">
<h2>Latest articles</h2>
<a href="/articles/>See all</a>
</div>
</section>
.section-header {
display: flex;
justify-content: space-between;
}
.section-header:has(> a) {
align-items: center;
border-bottom: 1px solid;
padding-bottom: 0.5rem;
}這里使用了:has(> a)，它表示只選擇直接子元素。
2、卡片布局
有兩種類型的卡片操作：一種只有一個操作（鏈接），另一種具有多個操作（保存、分享等）。
當圖片具有多個操作時需要給這些操作添加display: flex，可以這樣來實現(xiàn):
<div class="card">
<div class="card-thumb><img src="cool.jpg"/></div>
<div class="card-content">
<div class="card-actions">
<div class="start">
<a href="#">Like</a>
<a href="#">Save</a>
</div>
<div class="end">
<a href="#">More</a>
</div>
</div>
</div>
</div>
.card-actions:has(.start, .end) {
display: flex;
justify-content: space-between;
}3、卡片圓角
根據(jù)是否有圖片來重置卡片組件的border-radius。
.card:not(:has(img)) .card-content {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card img {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card-content {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}實現(xiàn)效果如下：
4、過濾組件
有一個具有多個選項的組件，當它們沒有被選中時，不顯示重置按鈕。當選中其中一個選項時，顯示重置按鈕。
可以使用 :has選擇器輕松實現(xiàn)這個功能：
.btn-reset {
display: none;
}
.multiselect:has(input:checked) .btn-reset {
display: block;
}5、顯示或隱藏表單元素
有時可能需要根據(jù)之前的選擇來顯示特定的表單字段。在下面的例子中，當下拉框選中“other”字段時，就展示 other reason 輸入框：
使用 CSS :has 選擇器就可以檢查選擇菜單是否選擇了 other 字段，并在此基礎上顯示 other reason 輸入框：
.other-field {
display: block;
}
form:has(option[value="other"]:checked) .other-field {
display: block;
}6、導航欄
有一個帶有子菜單的導航欄，當鼠標懸停在菜單項上時展示子菜單：
我們需要做的就是根據(jù)是否展示子菜單來顯示或隱藏右側的箭頭?？梢允褂?has 選擇器輕松實現(xiàn)這一點，這里只需檢查li元素中是否包含ul即可：
li:has(ul) > a:after {
content: "";
}7、強制警報
在某些儀表板中，可能需要用戶必須注意重要警報。在這種情況下，擁有頁內警報可能還不夠。例如，在這種情況下，可能會為標題元素添加紅色邊框和暗紅色背景色。這樣會增加用戶快速注意到警報的可能性。
CSS :has 就可以檢查.main元素是否有警報。如果有，將以下樣式添加到標題中：
.main:has(.alert) .header {
border-top: 2px solid red;
background-color: #fff4f4;
}8、切換配色方案
可以使用 CSS :has 來更改網站的配色方案。例如，如果有多個使用 CSS 變量構建的主題，可以通過<select>菜單來進行切換。
html {
--color-1: #9e7ec8;
--color-2: #f1dceb;
}
當選擇另一個主題時，CSS 變量將被更改：
html:has(option[value="blueish"]:checked) {
--color-1: #9e7ec8;
--color-2: #f1dceb;
}顯示效果如下：
9、帶有圖標的按鈕
有一個默認的按鈕樣式。當按鈕中包含圖標時，使用 flexbox 來居中對齊按鈕的內容：
.button:has(.c-icon) {
display: inline-flex;
justify-content: center;
align-items: center;
}10、多個按鈕
有一組操作按鈕，如果超過 2 個按鈕，則最后一個按鈕顯示在右側：
可以使用數(shù)量查詢來實現(xiàn)這一點。下面的 CSS 將檢查按鈕的數(shù)量是否為 3 或更多。如果是，則最后一個 flex 項目將使用 margin-left: auto：
.btn-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-group:has(.button:nth-last-child(n + 3)) .button:last-child {
margin-left: auto;
}11、根據(jù)項目數(shù)更改網格
使用 CSS grid 布局中，可以使用 minmax() 功能創(chuàng)建真正響應式和自動調整大小的網格項。然而，這可能還不夠，我們還想根據(jù)項目數(shù)量來改變網格。
.wrapper {
--item-size: 200px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr));
gap: 1rem;
}當有 5 個項目時，最后一個將換行：
可以通過檢查.wrapper中是否有 5 個或更多項目來解決這個問題。同樣，這是使用到了數(shù)量查詢的概念。
.wrapper:has(.item:nth-last-child(n + 5)) {
--item-size: 120px;
}實現(xiàn)效果如下：
瀏覽器支持
:has 選擇器的支持情況如下：
可以使用 CSS 中的@supports規(guī)則來判斷瀏覽器是否支持該選擇器：
@supports selector(:has(*)) {
}參考：https://ishadeed.com/article/css-has-parent-selector/
