css3偽類和偽元素你都懂了嗎

什么是偽類？

偽類用于定義元素的特殊狀態(tài)。 例如，它可用于：

• 當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)為其設(shè)置樣式
• 訪問和未訪問的鏈接不同樣式
• 在獲得焦點(diǎn)時(shí)設(shè)置元素的樣式

偽類的語法

后代選擇器匹配作為指定元素后代的所有元素。以下示例選擇<div>元素內(nèi)的所有<p>元素：

選擇器:偽類 {     屬性:值;   }

鏈接可以以不同方式顯示：

/* 未訪問的鏈接 */ 
a:link {   color: red; } 
/* 已瀏覽過的鏈接 */ 
a:visited {   color: green; } 
/* 鼠標(biāo)懸停時(shí)候的鏈接 */ 
a:hover {   color: hotpink; } 
/* 選定的鏈接 */ 
a:active {   color: blue; }

注意：a:hover必須在CSS定義a:link之后和a:visited之后才能生效！a:active必須?a:hover在CSS定義之后才能有效！偽類名稱不區(qū)分大小寫。

偽類和CSS類

偽類可以與CSS類結(jié)合使用：當(dāng)您將鼠標(biāo)懸停在示例中的鏈接上時(shí)，它將更改顏色：

a.highlight:hover {   color: #ff0000; }

將鼠標(biāo)懸停在<div>上

:hover在<div>元素上使用偽類的示例：

div:hover {   background-color: blue; }

簡單的工具提示懸停

將鼠標(biāo)懸停在<div>元素上以顯示<p>元素（如工具提示）

p {   
display: none; 
background-color: yellow;  
padding: 20px; 
} 
div:hover p { 
display: block;
}

:first-child偽類

:first-child偽類指定的元素是另一個(gè)元素的第一個(gè)子匹配。 在以下示例中，選擇器匹配任何元素的第一個(gè)子元素<p>元素：

p:first-child {   color: blue; }

匹配所有<p>元素中的第一個(gè)<i>元素

p i:first-child {   color: blue; }

匹配所有第一個(gè)子<p>元素中的所有<i>元素

p:first-child i {   color: blue; }

:lang偽類

:lang偽類允許定義不同語言的特殊規(guī)則。在下面的示例中，:lang使用lang=“no”定義<q>元素的引用：

q:lang(no) {   quotes: "~" "~"; }

所有CSS偽類

所有CSS偽元素