css巧妙實現：激活標簽影響相鄰元素圓角樣式
網頁交互設計中，常需實現點擊一個元素，其相鄰元素樣式也隨之變化的效果。本文將探討如何利用css選擇器實現此效果，特別是針對激活標簽前后元素圓角的調整。
場景描述
假設一個列表，每個列表項為一個
CSS實現
以下CSS代碼展示如何實現上述效果，無需JavaScript干預：
.left { width: 100px; } .left li { height: 45px; display: flex; align-items: center; justify-content: center; transition: all .3s; /* 添加過渡效果 */ background: pink; border-radius: 0; /* 初始狀態無圓角 */ } li.active { background: #fff; } /* 選擇激活元素的后一個元素 */ li.active + li { border-radius: 0 10px 0 0; } /* 選擇激活元素的前一個元素 (使用通用選擇器，避免 :has 的兼容性問題) */ li + li.active { border-radius: 0 0 10px 0; }
這段代碼利用了CSS的相鄰兄弟選擇器(+)。li.active + li選擇的是緊跟在具有active類的
立即學習“前端免費學習筆記（深入）”；
此方法避免了:has選擇器可能存在的瀏覽器兼容性問題，并提供了一種更簡潔、高效的解決方案。 通過合理的CSS選擇器和屬性設置，我們輕松實現了預期效果。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
