css:巧妙運用選擇器實現選中標簽對相鄰元素樣式的影響
在網頁開發中,常常需要通過一個元素的狀態變化來影響其相鄰元素的樣式。例如,在一個標簽列表中,激活某個標簽后,不僅該標簽樣式改變,其前后元素的樣式也應隨之調整,提升用戶體驗。
假設我們有一個標簽列表,點擊某個標簽后,該標簽添加 active 類,并使其前后元素的圓角樣式發生變化:前一個元素的右下角圓角改變,后一個元素的右上角圓角改變。
現有代碼如下:
.left { width: 100px; } .left li { height: 45px; display: flex; align-items: center; justify-content: center; transition: all .3s; background: pink; } li.active { background: #fff; } li.active + li { /* 影響后一個元素 */ border-radius: 0 10px 0 0; }
為了實現更靈活的樣式調整,我們可以利用 CSS 的 :has() 選擇器(注意瀏覽器兼容性)。:has() 選擇器可以檢測元素是否包含特定后代或兄弟元素,從而改變其樣式。
立即學習“前端免費學習筆記(深入)”;
改進后的 CSS 代碼:
li:has(+li.active) { /* 影響前一個元素 */ border-radius: 0 0 10px 0; } li.active + li { /* 影響后一個元素 */ border-radius: 0 10px 0 0; }
li:has(+li.active) 選擇器表示:如果一個 li 元素后面緊跟著一個帶有 active 類的 li 元素,則該 li 元素的右下角圓角將被修改。類似地,li.active + li 選擇器則影響激活元素后面的元素。
通過以上 CSS 代碼,點擊激活某個標簽后,該標簽及其相鄰元素的圓角樣式會自動調整,達到預期效果。 需要注意的是,:has() 選擇器的瀏覽器兼容性并非完美,在使用時需考慮兼容性問題。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END