CSS 如何通過選中激活標簽來影響其相鄰元素的樣式?

CSS 如何通過選中激活標簽來影響其相鄰元素的樣式?

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
喜歡就支持一下吧
點贊5 分享