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() 選擇器的瀏覽器兼容性并非完美，在使用時需考慮兼容性問題。