建站
咨詢
售后
建站咨詢
新聞中心
:has 選擇器
概述在CSS中，我們無法根據(jù)元素中是否存在特定的元素來設(shè)置父元素的樣式，要想實(shí)現(xiàn)這一點(diǎn)，就必須創(chuàng)建CSS類，并根據(jù)需要進(jìn)行類的切換。來看下面的例子：
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，提供成都做網(wǎng)站、成都網(wǎng)站制作，網(wǎng)頁設(shè)計，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊，希望更多企業(yè)前來合作!
這里有兩種卡片：包含圖片和不包含圖片。在CSS中需要這樣做：
/* 有圖片的卡片 */
.card {
display: flex;
align-items: center;
gap: 1rem;
}
/* 沒有圖片的卡片 */
.card-plain {
display: block;
border-top: 3px solid #7c93e9;
}
卡片內(nèi)容
卡片內(nèi)容
這里創(chuàng)建了一個類card-plain，專門用于沒有圖片的卡片，在沒有圖片時就不需要flex布局。如果使用 CSS 中的父選擇器 :has 就不需要再寫這個類，只需要使用它來檢查卡片中是否包含.card-image即可：
.card:has(.card-image) {
display: flex;
align-items: center;
}根據(jù) CSS 規(guī)范，:has 選擇器可以檢查父元素是否包含至少一個元素，或者一個條件，例如輸入是否獲取到焦點(diǎn)。
:has 選擇器不僅可以檢查父元素是否包含特定的子元素，還可以檢查一個元素后面是否跟有另一個元素：
.card h2:has(+ p) { }這將檢查
元素是否直接跟在
元素之后。
我們也可以將它與表單元素一起使用來檢查輸入是否獲取到了焦點(diǎn)：
form:has(input:focused) {
background-color: lightgrey;
}:has 選擇器使用示例下面來看看一些使用:has選擇器實(shí)現(xiàn)頁面效果的案例吧!
1. 標(biāo)題樣式
當(dāng)處理章節(jié)標(biāo)題時有兩種情況，一種是只包含標(biāo)題，另一種包含標(biāo)題和鏈接。
根據(jù)是否有鏈接來定義不同的樣式：
.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;
}實(shí)現(xiàn)效果如下：
4. 過濾組件
有一個具有多個選項(xiàng)的組件，當(dāng)它們沒有被選中時，不顯示重置按鈕。當(dāng)選中其中一個選項(xiàng)時，顯示重置按鈕。
可以使用 :has選擇器輕松實(shí)現(xiàn)這個功能：
.btn-reset {
display: none;
}
.multiselect:has(input:checked) .btn-reset {
display: block;
}5. 顯示或隱藏表單元素
有時可能需要根據(jù)之前的選擇來顯示特定的表單字段。在下面的例子中，當(dāng)下拉框選中“other”字段時，就展示 other reason 輸入框：
使用 CSS :has 選擇器就可以檢查選擇菜單是否選擇了 other 字段，并在此基礎(chǔ)上顯示 other reason 輸入框：
.other-field {
display: block;
}
form:has(option[value="other"]:checked) .other-field {
display: block;
}6. 導(dǎo)航欄
有一個帶有子菜單的導(dǎo)航欄，當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時展示子菜單：
我們需要做的就是根據(jù)是否展示子菜單來顯示或隱藏右側(cè)的箭頭?？梢允褂?has 選擇器輕松實(shí)現(xiàn)這一點(diǎn)，這里只需檢查li元素中是否包含ul即可：
li:has(ul) > a:after {
content: "";
}7. 強(qiáng)制警報
在某些儀表板中，可能需要用戶必須注意重要警報。在這種情況下，擁有頁內(nèi)警報可能還不夠。例如，在這種情況下，可能會為標(biāo)題元素添加紅色邊框和暗紅色背景色。這樣會增加用戶快速注意到警報的可能性。
CSS :has 就可以檢查.main元素是否有警報。如果有，將以下樣式添加到標(biāo)題中：
.main:has(.alert) .header {
border-top: 2px solid red;
background-color: #fff4f4;
}8. 切換配色方案
可以使用 CSS :has 來更改網(wǎng)站的配色方案。例如，如果有多個使用 CSS 變量構(gòu)建的主題，可以通過菜單來進(jìn)行切換。
html {
--color-1: #9e7ec8;
--color-2: #f1dceb;
}當(dāng)選擇另一個主題時，CSS 變量將被更改：
html:has(option[value="blueish"]:checked) {
--color-1: #9e7ec8;
--color-2: #f1dceb;
}顯示效果如下：
9. 帶有圖標(biāo)的按鈕
有一個默認(rèn)的按鈕樣式。當(dāng)按鈕中包含圖標(biāo)時，使用 flexbox 來居中對齊按鈕的內(nèi)容：
.button:has(.c-icon) {
display: inline-flex;
justify-content: center;
align-items: center;
}10. 多個按鈕
有一組操作按鈕，如果超過 2 個按鈕，則最后一個按鈕顯示在右側(cè)：
可以使用數(shù)量查詢來實(shí)現(xiàn)這一點(diǎn)。下面的 CSS 將檢查按鈕的數(shù)量是否為 3 或更多。如果是，則最后一個 flex 項(xiàng)目將使用 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ù)項(xiàng)目數(shù)更改網(wǎng)格
使用 CSS grid 布局中，可以使用 minmax() 功能創(chuàng)建真正響應(yīng)式和自動調(diào)整大小的網(wǎng)格項(xiàng)。然而，這可能還不夠，我們還想根據(jù)項(xiàng)目數(shù)量來改變網(wǎng)格。
.wrapper {
--item-size: 200px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr));
gap: 1rem;
}當(dāng)有 5 個項(xiàng)目時，最后一個將換行：
可以通過檢查.wrapper中是否有 5 個或更多項(xiàng)目來解決這個問題。同樣，這是使用到了數(shù)量查詢的概念。
.wrapper:has(.item:nth-last-child(n + 5)) {
--item-size: 120px;
}實(shí)現(xiàn)效果如下：
瀏覽器支持
目前，:has 選擇器已經(jīng)在 Safari 15.4 和 Chrome Canary 中得到了支持。
可以使用 CSS 中的@supports規(guī)則來判斷瀏覽器是否支持該選擇器：
@supports selector(:has(*)) {
}參考：https://ishadeed.com/article/css-has-parent-selector/
網(wǎng)站名稱：你不知道的CSS父選擇器
標(biāo)題URL：http://www.dlmjj.cn/article/dhsicpg.html
