僞類選擇器
僞類選擇器和僞元素選擇器可以爲文檔中非具體存在的結果指定樣式，或者爲某些元素（包括文檔本身）的狀態指定樣式，它會根據某種條件而非文檔結構應用樣式。
僞類選擇器的使用方法如下：
HTML標記 僞類名{僞類名：屬性值；屬性名：屬性值；.....}
常用的僞類如下表所示：
| 僞類名 | 描述 |
|---|---|
| :link | 鼠標沒有放上去之前的樣式 |
| :visited | 訪問過的超鏈接的樣式 |
| :focus | 元素稱爲焦點的時候，常用於表單元素 |
| :hover | 用於鼠標在元素上，而尚未觸發或點擊它的時候，例如，鼠標指針可能停留在一個超鏈接上，:hover 就會指示這個超鏈接 |
僞類選擇器的使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇僞類的使用</title>
<style>
a:link{/*超鏈接初始顏色爲blue*/
color: blue;
}
a:visited{/*超鏈接點擊一次之後，顏色變爲darkslategrey;*/
color: darkslategrey;
}
a:hover{/*鼠標在超鏈接上時，超鏈接顏色爲yellow*/
color: yellow;
}
a{
font-size: 32px;
}
</style>
</head>
<body>
<div>
<a href="https://blog.csdn.net/lolly1023">CSDN：董小宇</a>
</div>
</body>
</html>
效果如下：
blue爲初始設置顏色，黃色爲鼠標停滯於連接上的顏色。
僞類使用的說明：
a標記上僞類的順序應爲LVHA（: link:visited:focus:hover）在CSS定義中，a:hover必須被置於a:link和a:vistied之後，纔是有效的，在CSS定義中，a:active必須被置於a:hover之後，纔是有效的。
僞元素選擇器
僞元素選擇器的使用方法如下：
HTML標記：僞元素（屬性名：屬性值；屬性名：屬性值；…）
常用的僞元素如下表所示：
| 僞元素名 | 描述 |
|---|---|
| :first-letter | 向文本中的第一個字母添加特殊樣式，與塊級元素關聯 |
| :first-line | 向文本中的首航添加特殊樣式 |
| :before | 在元素之前添加內容，默認的這個僞元素是行內元素 |
| :after | 在元素之後添加內容 |
僞元素的使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇僞元素的使用</title>
<style>
/*第一行的首字母發生變化*/
div::first-letter{/*設置第一段開頭第一個字大小爲64px*/
font-size: 64px;
}
/*第一行全部修改*/
div::first-line{/*設置第一行的背景色爲red*/
background-color: red;
}
/*在文本前面添加內容*/
div::before{/*在開頭添加內容，需要使用content才能添加*/
/*添加文本內容*/
content: 'CSDN';
font-style: italic;
}
/*在文本後面添加內容*/
div::after{/*在開頭添加內容，需要使用content才能添加*/
content: '董小宇';
color: blue;
}
</style>
</head>
<body>
<div>
僞元素的實例
</div>
</body>
</html>
效果如下：
交集選擇器
- 交集選擇器由兩個選擇器組成，其結果是選中二者格子元素範圍的交集。
- 要求：交集中第一個選擇器必須是標記選擇器，第二個必須是class類選擇器，或者是id選擇器。
- 兩個選擇器之間不能有空格，必須連續書寫。
交集選擇器的使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇交集選擇器的使用</title>
<style>
p.p1{/**使用交集選擇器，選中了p標籤與類選擇器爲p1的內容，然後進行修改/
font-size: 32px;
}
</style>
</head>
<body>
<div>
<p class="p1">我使用了交集選擇器</p>
<p>我沒有使用交集選擇器</p>
</div>
</body>
</html>
效果如下：
編程我也是初學者，如若有理解錯誤的地方，希望大家看完之後，發現錯誤可以評論出來，謝謝大家