學習筆記，僅供參考，有錯必糾
參考自：CSS中文文檔
CSS
僞類
| 僞類 | 意義 |
|---|---|
:link |
僞類將應用於未被訪問過的鏈接 |
:hover |
僞類將應用於有鼠標指針懸停於其上的元素 |
:active |
僞類將應用於被激活的元素，如被點擊的鏈接、被按下的按鈕等。 |
:visited |
僞類將應用幹己經被訪問過的 |
:focus |
僞類將應用於擁有鍵盤輸入焦點的元素 |
注意：CSS有一個層疊的特定，所以必須按照LVHA的順序使用.
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞類</title>
<style>
a:link {
color: red;
}
a:visited {
color: purple;
}
a:hover {
background-color: silver;
color: white;
}
a:active {
color: yellow;
}
/*LoVe HAte*/
.txtName:focus {
background-color: green;
}
a:focus {
font-size: 20px;
}
</style>
</head>
<body>
<a href="#">當前網站</a>
<a href="http://www.baidu.com">百度的官網</a>
<a href="http://www.jd.com">新浪官網</a>
<div>
<input type="text" class="txtName">
</div>
</body>
</html>
頁面：
僞元素
CSS僞元素(pseudo-element)可以用來添加一些選擇器的特殊效果。
元素的語法：
選擇器:僞元素 {屬性:值;}
:first-line
“first-line” 僞元素用於向文本的首行設置特殊樣式。
- 舉個例子
現在，我們把文本的第一行背景色設置爲紅色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞元素</title>
<style>
.datam:first-line {
background-color: red;
}
</style>
</head>
<body>
<p class="datam">
數據挖掘通常與計算機科學有關，並通過統計、在線分析處理、情報檢索、機器學習、專家系統（依靠過去的經驗法則）和模式識別等諸多方法來實現上述目標.
數據挖掘是人工智能和數據庫領域研究的熱點問題，所謂數據挖掘是指從數據庫的大量數據中揭示出隱含的、先前未知的並有潛在價值的信息的非平凡過程。數據挖掘是一種決策支持過程，它主要基於人工智能、機器學習、模式識別、統計學、數據庫、可視化技術等，高度自動化地分析企業的數據，作出歸納性的推理，從中挖掘出潛在的模式，幫助決策者調整市場策略，減少風險，作出正確的決策。知識發現過程由以下三個階段組成：①數據準備；②數據挖掘；③結果表達和解釋。數據挖掘可以與用戶或知識庫交互。
</p>
</body>
</html>
頁面：
:first-letter
“first-letter” 僞元素用於向文本的首字母設置特殊樣式。
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞元素</title>
<style>
.datam:first-letter {
background-color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p class="datam">
數據挖掘通常與計算機科學有關，並通過統計、在線分析處理、情報檢索、機器學習、專家系統（依靠過去的經驗法則）和模式識別等諸多方法來實現上述目標.
數據挖掘是人工智能和數據庫領域研究的熱點問題，所謂數據挖掘是指從數據庫的大量數據中揭示出隱含的、先前未知的並有潛在價值的信息的非平凡過程。數據挖掘是一種決策支持過程，它主要基於人工智能、機器學習、模式識別、統計學、數據庫、可視化技術等，高度自動化地分析企業的數據，作出歸納性的推理，從中挖掘出潛在的模式，幫助決策者調整市場策略，減少風險，作出正確的決策。知識發現過程由以下三個階段組成：①數據準備；②數據挖掘；③結果表達和解釋。數據挖掘可以與用戶或知識庫交互。
</p>
</body>
</html>
輸出：
:first-child
對於屬於第一個子元素的元素設置特殊樣式。
- 舉個例子
選擇第一個子元素爲span的所有標籤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞元素</title>
<style>
span:first-child {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>
<span>第一個</span>
<span>第二個</span>
<span>第三個</span>
</p>
<div>
<span>AAA</span>
<span>BBB</span>
<span>CCC</span>
</div>
</body>
</html>
輸出：
:before 和:after
“:before” 僞元素可以在元素的內容前面插入新內容
“:after” 僞元素可以在元素的內容之後插入新內容
- 舉個例子1
在文本的同一行前後加入"-------" ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞元素</title>
<style>
div:before, div:after {
content: "-------";
}
</style>
</head>
<body>
<div>
俺是div標籤
</div>
</body>
</html>
頁面：
- 舉個例子2
在文本的上下以塊級標籤的形式加入"-------"：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞元素</title>
<style>
div:before, div:after {
content: "-------";
display: block;
}
</style>
</head>
<body>
<div>
俺是div標籤
</div>
</body>
</html>
頁面：
