CSS 缺少直接選取
父項元素的方法
所有子項。多年來,一直以來都是開發人員不斷提出的要求。
但現在所有主要瀏覽器都支援 :has()
選取器,可以解決這個問題。之前
:has()
,您通常會鏈結長的選取器或新增樣式掛鉤類別。現在
就能根據元素與子系的關係設定樣式閱讀完整內容
關於 :has()
選取器的
2023 年納入 CSS 供應商和
每一位前端開發人員都應知道的 5 個 CSS 程式碼片段。
這個選取器似乎很小,但也能用於大量用途。
本文將說明電子商務公司能夠使用
:has()
選取器。
:has()
屬於基準新推出的一部分。
請參閱本文的完整系列文章,其中會說明 電子商務公司利用全新的 CSS 和 UI 功能提升網站品質。
政策台
透過
:has()
選取器,我們得以消除 JavaScript 式驗證 並替換成有效的 CSS 解決方案 帶來更順暢的體驗。—Aman Policybazaar 技術主管 Soni
Policybazaar 投資團隊巧妙運用「:has()
」選取器,提供
清楚指出正在比較方案的使用者。下方圖片
比較 UI 中顯示兩種方案 (黃色和藍色)。每個方案
只能與本身的類型比較。在使用者選取某項產品時,使用 :has()
無法選取其他企劃書類型。
: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 的健康狀態團隊
或是用途稍有不同使用者可以進行內嵌測驗,並使用該測驗
: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
類別,
已新增疊加層。在這個範例中,:has() 選取器會與 &
搭配使用
巢狀 .thumbnailWrapper
類別內的巢狀選取器
所有縮圖。這將建立更多模組化且更容易理解的 CSS。
![Tokopedia 使用 include 選取器前後的頁面螢幕截圖。](https://developer.chrome.google.cn/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=19&hl=zh-tw)
:has()
前後的期間。程式碼
以下程式碼使用
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 功能 (例如捲動式介面) 時獲得良好成效 動畫、檢視轉場效果、彈出式視窗和容器查詢。