##### 5 偽類選擇器 anchor偽類：專用於控制鏈接的顯示效果 |More Actions[:link](https://www.w3school.com.cn/cssref/selector_link.asp) |a:link |選擇所有未被訪問的鏈接。 | | | | | |[:visi ...
5 偽類選擇器
anchor偽類：專用於控制鏈接的顯示效果
| More Actions:link | a:link | 選擇所有未被訪問的鏈接。 |
|---|---|---|
| :visited | a:visited | 選擇所有已被訪問的鏈接。 |
| :active | a:active | 選擇活動鏈接。 |
| :hover | a:hover | 選擇滑鼠指針位於其上的鏈接。 |
<style>
a:link{
color: red;
}
a:visited{
color: coral;
}
a:hover{
color: blue;
}
a:active{
color: rebeccapurple;
}
</style>
before after偽類
before/after偽類相當於在元素內部插入兩個額外的標簽，其最適合也是最推薦的應用就是圖形生成。在一些精緻的UI實現上，可以簡化HTML代碼，提高可讀性和可維護性。
| More Actions:first-child | p:first-child | 選擇屬於父元素的第一個子元素的每個 元素。 |
|---|---|---|
| :last-child | p:last-child | 選擇屬於其父元素最後一個子元素每個 元素。 |
| :before | p:before | 在每個 元素的內容之前插入內容。 |
| :after | p:after | 在每個 元素的內容之後插入內容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css偽類選擇器</title>
<style>
/*a:link{*/
/* color: red; !* 滑鼠點擊字體變成紅色 *!*/
/*}*/
/*a:visited{*/
/* color: coral; !* 設定字體為橙色 *!*/
/*}*/
/*a:hover{*/
/* color: blue; !* 滑鼠滑過字體變成藍色 *!*/
/*}*/
/*a:active{*/
/* color: rebeccapurple;*/
/*}*/
.c1 p:first-child{
color: red;
}
p#i1:after{
content: "這是一個偽類構造的塊級標簽";
display: block;
color: gold;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">hello world! </a>
<div class="c1">
<p>item1</p>
<p>item2</p>
<div>item3</div>
<p>item4</p>
</div>
<div id="i1">
DIV標簽
<!-- <div style="color: red">這是一個偽類構造的塊級標簽</div>-->
</div>
<p>兩隻黃鸝鳴翠柳</p>
</body>
</html>
本文來自博客園，作者：生而自由愛而無畏，轉載請註明原文鏈接：https://www.cnblogs.com/zczhaod/p/17640434.html
