背景：

期望實現效果：鼠標點擊之后，保持選中樣式。

實現思路：在css樣式中，:active 是一種偽類，用于表示用戶當前正在與被選定的元素進行交互。當用戶點擊或按住鼠標時，元素將被激活，此時 :active 偽類將生效。一旦鼠標按鍵釋放或觸摸結束，:active 狀態將消失。

:focus偽類的樣式在元素獲得焦點后會保持顯示，直到失去焦點。

最終思路：

通過 CSS 來保持 :active 樣式。這可以通過使用?:focus + :active?選擇器結合?tabindex?屬性來實現。

效果展示：

核心代碼：

tabindex綁定一個值，可以是字符串，也可以是數字類型。主要是做區分不同的點擊元素

//css                    .menu-item {margin: 0 20px;.text {color: #FFFFFF;}}.menu-item:active {background-color: pink;.text {color: #FFEEA8 !important;}}.menu-item:focus {background-color: rgb(192, 255, 197);.text {color: #FFEEA8 !important;}}

發現只要這串代碼也能實現效果：

        .menu-item:focus {border: none;border-bottom: 2px solid;color: #FFEEA8;border-image: linear-gradient(90deg, rgba(19, 69, 117, 0), rgba(255, 238, 168, 1), rgba(19, 69, 117, 0)) 2 2;.text {color: #FFEEA8 !important;}}

?

官網鏈接：點擊跳轉

??有興趣的歡迎補充、評論。。。