CSS 發現無法根據子項直接選取父項元素。多年來,這項技術是開發人員最重視的需求。所有主要瀏覽器現在都支援 :has()
選取器,就能解決這個問題。在 :has()
之前,您通常會鏈結長選取器,或新增樣式掛鉤類別。現在,您可以根據元素與子系的關係來設定樣式。如要進一步瞭解 :has()
選取器,請參閱「2023 年的 CSS 包裝」和「每個前端開發人員應該知道的 5 個 CSS 程式碼片段」。
雖然這個選取器看起來很小,但用途可能很多。本文示範電子商務公司透過 :has()
選取器解鎖的一些用途。
:has()
屬於新推出的基準。
查看本文的完整系列文章,瞭解電子商務公司如何運用全新 CSS 和 UI 功能提升網站成效。
政策博薩爾
透過
:has()
選取器,我們得以取消對使用者選項進行的 JavaScript 驗證,並將其替換為 CSS 解決方案,讓我們能夠提供與過去相同的體驗,並帶來與之前一致的體驗。也就是 Policybazaar 技術主管 Aman Soni。
Policybazaar 的投資團隊巧妙套用 :has()
選取器,以視覺化的方式明確顯示正在比較方案的使用者。下圖顯示比較 UI 中兩種類型的方案 (黃色和藍色)。每個方案只能與各自的類型進行比較。使用 :has()
時,當使用者選取某個方案類型無法選取另一種方案時。
程式碼
:has()
可讓您存取父項元素及其子項的樣式。下列程式碼會檢查父項容器是否已設定 .disabled-group
類別。如果是,資訊卡會顯示為灰色,且將 pointer-events
設為 none
,就不會回應「新增」按鈕。
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
Policybazaar 的 health 團隊實作的應用實例稍有不同。具有內嵌測驗給使用者,並使用 :has()
檢查問題核取方塊的狀態,確認問題是否已回答。如果是這種情況,動畫就會套用至下一個問題。
程式碼
在方案比較範例中,:has()
用於檢查類別是否存在。您也可以使用 :has(input:checked)
檢查輸入元素的狀態,例如核取方塊。在顯示測驗的視覺畫面中,紫色橫幅中的每個問題都是一個核取方塊。Policybazaar 會使用 :has(input:checked)
檢查是否已回答問題,如果有,請使用 animation: quesSlideOut 0.3s 0.3s linear forwards
觸發動畫,將投影片滑到下一個問題。請參閱下列程式碼,瞭解此做法的運作方式。
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
如果產品縮圖含有影片,Tokopedia 使用 :has()
建立重疊圖片。如果產品縮圖包含 .playIcon
類別,系統會新增 CSS 疊加層。這裡的 :has() 選取器會與整個 .thumbnailWrapper
類別 (套用至所有縮圖) 中的 &
巢狀選取器搭配使用。就能建立更模組化且易於讀取的 CSS。
程式碼
以下程式碼使用 CSS 選取器和組合器 (&
和 >
),並以 :has()
建立巢狀結構,藉此設定縮圖的樣式。如果是不支援的瀏覽器,系統會使用一般額外的 CSS 類別規則做為備用方案。@supports selector(:has(*))
規則也會用於檢查瀏覽器支援。因此,在各瀏覽器版本中的整體使用體驗都一樣。
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
使用 :has()
的注意事項
結合 :has()
與其他選取器,即可建立更複雜的條件。請參閱 has() 系列選取器中的範例。
資源:
- 2023 年涵蓋的 CSS
- :has():系列選取器
- 示範 :has()
- 您要回報錯誤或提出新功能建議嗎?我們想聽聽你的看法!
請瀏覽本系列其他文章,瞭解使用新的 CSS 和 UI 功能 (例如捲動式動畫、瀏覽轉換、彈出式視窗和容器查詢) 為電子商務公司帶來哪些好處。