只有一個CSS類中的類聲明可以工作

這是我的代碼：

HTML：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css-style.css"> 
     <title></title> 
    </head> 
    <body> 
     <h1>Hello HTML!</h1> 
     <p>I am Hristiqn. I am from <a class="magic" href="https://en.wikipedia.org/wiki/Neverland">Neverland</a></p> 
    </body> 
</html>

CSS：

a.magic:visited {font-size: 300px; 
    background: -webkit-linear-gradient(gold,green); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;} 

a.magic:active {font-size: 300px; 
    background: -webkit-linear-gradient(red,green); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;} 

    a.magic:hover { font-size: 60px; 
    background: -webkit-linear-gradient(white, green); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;}

現在，我嘗試這樣做，通過設置所需的樣式屬性的一類，稱爲魔術，但似乎只有：懸停的作品。我試圖按名稱設置屬性，但效果是一樣的 - 只有懸停工作。

因此，我希望鏈接按鈕在我將鼠標懸停在其上時執行不同的操作，只要它處於活動狀態等等，但似乎只有我的：懸停聲明有效，我不知道爲什麼。

謝謝。

來源

2017-03-03 Християн Христов

[This could help]（https://css-tricks.com/remember-selectors-with-love-and-hate/） –

您需要提供代碼的最小示例導致這裏的問題，而不是第三方的網站，明天可能會改變或消失，幫助將來沒有人出現類似的問題。 – Rob

我注意到你的</a>被錯誤地關閉了。嘗試修復。

來源

2017-03-03 11:28:31

@ХристиянХристов使用下面的代碼可能是它的幫助。

a.magic:visited { 
     font-size: 30px; 
     background: -webkit-linear-gradient(gold,green); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
    } 

    a.magic:active { 
     font-size: 30px; 
     background: -webkit-linear-gradient(red,green); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
    } 

    a.magic:hover { 
     font-size: 60px; 
     background: -webkit-linear-gradient(white, green); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
    }

來源

2017-03-03 11:44:34

此代碼與我的 –

的工作方式相同，如果您使用背景圖像來設置鏈接樣式並指示它們是否被訪問，那麼這將不再有效。 –

你沒有做錯任何事 - 它只是不這樣（再）。造型：visited被用作安全漏洞，因此瀏覽器製造商基本上取消了以下幾種替代樣式：除少數屬性（例如「顏色」，「背景顏色」）外，其他瀏覽器已被訪問請參閱：http：//hacks.mozilla .org/2010/03/privacy-related-changes-coming-to-css-vistited/ –

對於常規的a:link狀態，您沒有CSS規則 - 是故意的嗎？

這樣，當您將光標移動到鏈接上（:hover），或者您已經訪問鏈接頁面並返回到原始頁面（:visited）或僅在很短的時間內點擊鏈接並打開新頁面之前（:active）。但常規鏈接將以默認設置顯示。如果你想要改變，使用選擇器創建另一個規則（或添加第二個選擇器到其中一個現有規則），使用選擇器a.magic:link

來源

2017-03-03 12:07:59 Johannes

擺脫所有這些。嘗試實現與顏色相同的效果，背景只

-webkit-background-clip: text; -webkit-text-fill-color: transparent;}

這些屬性不會在Firefox上工作，所以它不是這樣的大問題失去他們:)。這裏用不同的技術示例link

來源

2017-03-03 12:37:43

只有一個CSS類中的類聲明可以工作

回答

相關問題