我處理一個問題已經有一段時間了，但是我似乎不能解決它。我的網站頁腳有社交圖標，當他們被訪問或當你懸停在他們上面時，我想改變他們的顏色。然而，由于某種原因，如果我為一個鏈接將背景色保持透明，被訪問的狀態不會改變背景色。如果我在鏈接的CSS中添加一個背景顏色，那么它在被訪問時會改變顏色。我想知道為什么會發生這種情況，我該如何解決它，特別是因為我有一個整個div的漸變背景，我不能將它應用到這個特定鏈接的背景顏色。

` #下面是React代碼

import React from 'react'

import {GrFacebookOption, GrInstagram} from "react-icons/gr"
import "./Footer.css"

const Footer = () => {
  return (
    <div className='app__footer'>
      <hr />
      <div className='app__footer-social'>
      <a className='fb' ><GrFacebookOption size={13}/></a>
      <a className='ig' href='asdasdasds' ><GrInstagram size={13}/></a>
      </div>
    </div>
  )
}

export default Footer

下面是CSS代碼

`.app__footer-social a{
    border: 2px solid #E3E3E4;
    border-radius: 50%;
    margin: 0 0.55rem;
    padding: 0.5rem 0.6rem 0.4rem;
    color: rgba(19, 24, 33, 0.3);
}

.app__footer-social.fb:visited {
    color: #FFFFFF;
    border: 2px solid #2F4A80;
    background-color: #2F4A80;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .fb:hover {
    color: #FFFFFF;
    background: #4267B2;
    border: 2px solid #4267B2;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .ig:visited {
    color: #FFFFFF;
    background: #8F2762;
    border: 2px solid #8F2762;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .ig:hover {
    color: #FFFFFF;
    background: #C13584;
    border: 2px solid #C13584;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}
`

.app__footer-social a{
    border: 2px solid #E3E3E4;
    border-radius: 50%;
    margin: 0 0.55rem;
    padding: 0.5rem 0.6rem 0.4rem;
    color: rgba(19, 24, 33, 0.3);
    background: red
}

在您的css中，首先嘗試向a標記添加默認背景色。

.app__footer-social a {
    background-color: #fff;
}

:visited pseudo有隱私/屬性限制，但可以覆蓋以前定義的樣式。我相信這樣做是為了防止惡意網站確定你訪問過的地方。 使用:link偽對象也應該可以創建一個style :visited可以覆蓋。

.app__footer-social .fb:link {
    background-color: #fff;
}

這種方法不適用于透明(包括在rgba/hsla中使用alpha 0.0)或沒有顏色的任何東西。

還要記住，偽類應該按照定義的順序使用。鏈接、已訪問、聚焦、懸停、活動。

更多細節可以在這里找到。