超鏈接標簽的CSS偽類

82994 閱讀 0 評論 0 點贊

由于狀態(tài)是動態(tài)變化的，所以一個元素達到一個特定狀態(tài)時，它可能得到一個偽類的樣式；當狀態(tài)改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。

CSS偽類，是一種特殊的類，它針對到CSS選擇器起作用，使選中的標簽或元素產(chǎn)生特定的效果。

CSS偽類的語法就是：選擇器 : 偽類名 { 屬性 : 屬性值 }

用的最多的偽類就是超鏈接a的偽類，鏈接是網(wǎng)站的重要組成部分，幾乎在每個網(wǎng)頁上都能看到不少的鏈接，合理的設計鏈接的樣式能夠給網(wǎng)頁的顏值加分。鏈接有四種不同的狀態(tài)，分別是 link、visited、active 和 hover，可以通過以下偽類選擇器來為鏈接的四種狀態(tài)設置不同的樣式：

:link：定義未訪問鏈接的樣式；

:visited：定義已經(jīng)訪問過鏈接的樣式；

:hover：定義當鼠標經(jīng)過或懸停在鏈接上時的樣式；

:active：定義點擊鏈接時的樣式。

舉例：

<html>
<head>
</head>
<body >
    <a>沒有href的a標簽,字體沒有修飾，鼠標放上去也沒反應</a> </br>
        <a href="#" target="_blank"> href為#的a標簽，默認藍色，帶下劃線，鼠標放上去變成手 </a> </br>
        <a href="http://www.sztianhecheng.cn/" target="_blank" >href為網(wǎng)址的a標簽，效果同上</a>
</body>
</html>

運行結果：

CSS偽類

（1）:link

說明：設置a對象在未被訪問前的樣式表屬性。

舉例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>第一個鏈接</a>
    <a href=''>第二個鏈接</a>
</body>
</html>

運行結果：

:link

（2）:visited

說明：設置a對象在其鏈接地址已被訪問過時的樣式表屬性。

舉例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=''>第一個鏈接</a>
    <a href=''>第二個鏈接</a>
</body>
</html>

運行結果：

:visited

（3）:hover

說明：設置對象在其鼠標懸停時的樣式表屬性。

舉例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>第一個鏈接</a>
    <a href=''>第二個鏈接</a>
</body>
</html>

運行結果： :hover

（4）:active

說明：設置對象在被用戶激活（在鼠標點擊與釋放之間發(fā)生的事件）時的樣式表屬性。

舉例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=''>第一個鏈接</a>
    <a href=''>第二個鏈接</a>
</body>
</html>

運行結果：

:active