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