CSS :active 偽類元素被激活時的樣式

2024-07-11 08:35:33

字體：大中小

來源：轉載

供稿：網友

:active — CSS :active 偽類，適用于一個元素被激活時的樣式

語法: :active
CSS版本：CSS1

說明：
適用于一個元素被激活時的樣式，例如鼠標在此元素的區域內按下但還沒有釋放時
客戶端（瀏覽器）可以根據用戶與其交互的動作改變其渲染效果，CSS為這種情況提供了三個偽類：hover、active、focus
上述三種偽類不是互斥的，一個元素同時可以適用其中的若干個
:active偽類，適用于一個元素被用戶激活時，例如用戶在按下鼠標之后放開鼠標之前的這一段時間內。當用戶放開鼠標后，恢復元素原有的樣式
active，中文"激活、活躍"的意思

語法

:active
a:active
a.class:active

示例

CSS Code復制內容到剪貼板

a:active
{
    color:yellow;
    background:blue;
    font-size:small;
}
p:active
{
    color:yellow;
    background:blue;
    font-size:large;
}
div:active
{
    color:red;
    background:lime;
    font-size:small;
}

查看演示：http://demo.Vevb.com/js/2015/css_active/demo1.htm

偽類選擇符的順序：L-V-H-A

CSS提供了四種元素設置鏈接的顏色，包括:link、:visited、:hover、:active，它們的聲明是有一定順序的，我們簡稱這種順序為L-V-H-A，即link最先，其次visited，之后hover，最后active，如此聲明才能保證hover與active狀態顯示正確的樣式

示例
統一定義鏈接各種狀態下的樣式

CSS Code復制內容到剪貼板

a:link
{
    color:red;
}
a:visited
{
    color:green;
}
a:hover
{
    color:yellow;
    background:blue;
}
a:active
{
    color:lime;
    background:red;
}