CSS 偽類

2019-02-12 19:29 更新

我們可以使用CSS偽類結(jié)合選擇器來基于狀態(tài)對(duì)元素進(jìn)行樣式化。

例如:hover 將應(yīng)用一個(gè)樣式當(dāng)用戶將鼠標(biāo)懸停在選擇器指定的元素上時(shí)。

語法

下面的代碼顯示了使用CSS偽類的基本語法。我們將CSS偽類添加到選擇器，并通過：分隔。

selector:pseudo-class { 
   property: value; 
}

例子

以下代碼顯示如何使用CSS偽類為各種狀態(tài)的錨定樣式。

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: blue;
}

/* visited link */
a:visited {
    color: yellow;
}

/* mouse over link */
a:hover {
    color: black;
}

/* selected link */
a:active {
    color: red;
}
</style>
</head>
<body>

<p><a href="#">This is a link</a></p>

</body>
</html>

上面的代碼呈現(xiàn)如下：


a:hover必須來自a:link和a:visited在CSS定義中訪問才能有效。

a:active必須來自a:hover在CSS定義中才能有效。


偽類和CSS類

我們可以結(jié)合具有CSS類的偽類用于樣式元素。

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
    color: #ff0000;
} 
</style>
</head>
<body>

<p><a class="highlight" href="#">CSS Syntax</a></p>
<p><a href="#">CSS Tutorial</a></p>

</body>
</html>

上面的代碼呈現(xiàn)如下：


CSS選擇器 :focus

:focus 選擇具有焦點(diǎn)的元素。

顯示如何使用的示例：focus CSS selector。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        :focus{ 
            border: thin black solid; 
            padding: 4px; 
        } 
        </style> 
    </head> 
    <body> 
        <form> 
            Name: <input type="text" name="name"/> 
            <p/> 
            City: <input type="text" name="city"/> 
            <p/> 
            <input type="submit"/> 
        </form> 
    </body> 
</html>

上面的代碼呈現(xiàn)如下：

CSS選擇器


CSS選擇器 :first-letter

：first-letter 選擇器將樣式添加到的第一個(gè)字母指定的選擇器。

顯示如何使用的示例：first-letter的CSS選擇器。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter{
    font-size:200%;
    color:#8A2BE2;
}
</style>
</head>
<body>
    <p>w3cschool.cn</p>
    <p>m.o2fo.com</p>

</body>
</html>

上面的代碼呈現(xiàn)如下：



以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)