注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端站起來學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、什么是偽類

1.1 偽類基礎使用

👸小媛：這一節咱們講啥？

🐶1_bit：這一節咱們先講偽類。

👸小媛：什么是偽類？

🐶1_bit：這個知識點有點抽象，偽類指給當前整個 html 代碼已經存在的元素（標簽）模擬添加一個類樣式來實現一種效果。

👸小媛：果然很抽象，這不是跟之前的類樣式一樣嗎？

🐶1_bit：這兩者還是有一點區別的，例如我們想使 body 主體內容中的第一個 p 標簽顏色為紅，那么就可以這樣寫代碼。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 偽類 偽元素</title><style>p:first-child {color: red}</style>
</head>
<body><p>第1個段落 這個段落剛好是第一個為段落標簽，則生效</p><span>span標簽內容</span><p>第2個段落</p><span>第二個span標簽內容</span>
</body>
</html>

👸小媛：那個 p:first-child 是什么？

🐶1_bit：這是偽類的寫法，例如“標簽:偽類”，代碼中 first-child 指的是第一個元素，標簽如果是 p 那意思就是 p 的第一個元素，后面的 first-child 就是“指給當前整個 html 代碼已經存在的元素（標簽）模擬添加一個類樣式來實現一種效果”。

👸小媛：還是不清楚。

🐶1_bit：那我再給你說說吧。按照之前學習，我們知道了如何創建一個類樣式，也就是如下代碼形式。
在這里插入圖片描述
🐶1_bit：這樣的話就需要當前 p 元素去調用這個樣式，而使用偽類則不需要這樣寫。

👸小媛：奧，這就是這個“偽”的意思嗎？

🐶1_bit：哈哈哈，可以這樣說，并且偽類是已經定義好了的（你可以理解為名稱）。對了，我們還可以在外面加一個 div，包裹起來由于 div 是一個容器，也可以對 p 元素用偽類生效。

👸小媛：那 div 是啥東西？沒搞明白。

🐶1_bit：div 是一個容器，可以對整個 html 元素進行區域劃分，例如一個頁面中如果有很多個不同的內容，有標題、最新內容、最熱內容、推薦用戶，其實這些不同區域的內容就可以使用 div 進行分隔，隨后使用 css 樣式對其進行排版，使其在頁面上“擺放”在不同位置。

👸小媛：奧，我明白了，所以 div 就是用于對整體進行區域劃分的？并且通過div 使這一塊的元素擺放在頁面的不同位置？

🐶1_bit：對的，是這個意思。div 還可以進行嵌套，就是一個 div 中又包含一個 div，也可以包含多個，因為“一塊”內容也是需要進行排版，也分為很多區域，例如下面這個展示。

👸小媛：懂了，具體的還沒開始學對吧？你就是告訴我 div 的作用。

🐶1_bit：是的，所以之前那個用 div 的那個示例，只是介紹一下使用 div 包裹起來也沒啥問題，依舊生效。

👸小媛：明白了。

🐶1_bit：當然也可以直接使用css類進行調用也行，例如下面示例。
在這里插入圖片描述
👸小媛：直接在標簽名后面一個小數點就是類名了對吧？

🐶1_bit：是的。

👸小媛：那我明白了，不過還有一個問題，就是 first-child 這些偽類是固定的嗎？還有哪些呢？

1.2 超鏈接偽類

🐶1_bit：偽類還有挺多的，下面介紹幾個較為常用的偽類，就用超鏈接 a 標簽增加效果的偽類為例；例如設置超鏈接未訪問時顏色、已訪問時顏色、鼠標滑過顏色、已選中后顏色為例。未訪問顏色的設置使用 link 偽類、已訪問使用visited、鼠標滑過使用hover、已選中使用active。如下示例為演示demo。
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 偽類 偽元素</title><style>a:link{color: red}a:visited{color:blue}a:hover{color:green}a:active{color:orange}</style>
</head>
<body><a href="http://www.baidu.com">這是個鏈接</a><a href="http://www.csdn.com">這也是個鏈接</a>
</body>
</html>

在這里插入圖片描述
👸小媛：哇，感覺很舒服呀，這樣我做出來的一個網頁導航也能美美噠的了。

🐶1_bit：是的，但是你需要注意一個點，在使用以上說明的這幾個偽類時，我們需要注意 hover 必須被寫于 link 和 visited 之后，否則無法生效喲，還有就是 active 必須放在 hover 之后也才生效，這點一定要注意。

👸小媛：明白了。

1.3 其他偽類

🐶1_bit：我們在之前內容中有使用過列表標簽 ul，那如何使用偽類給列表的第一項元素標記值呢？這個也很簡單，查看以下示例。
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 偽類 偽元素</title><style>ul li:first-child{color: orangered;}</style>
</head>
<body><ul><li>第一項值</li><li>第二項值</li><li>第三項值</li></ul><ul><li>第一項值</li><li>第二項值</li><li>第三項值</li></ul>
</body>
</html>

在這里插入圖片描述

👸小媛：原來如果指定某個元素下的元素只需要在他們之家加一個空格就可以了呀。

🐶1_bit：是的，咱們再看一個示例將會更加清晰這種方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 偽類 偽元素</title><style>ul li:first-child{color: orangered;}p a:first-child{color: brown;}</style>
</head>
<body><ul><li>第一項值</li><li>第二項值</li><li>第三項值</li></ul><ul><li>第一項值</li><li>第二項值</li><li>第三項值</li></ul><p>這是個p標簽</p><p>這是個p標簽</p><p>這是 p 元素內容<a href="http://www.baidu.com">這是 p 元素下的 a 標簽</a></p></body>
</html>

在這里插入圖片描述

👸小媛：哇，可以這樣呀，我明白了。

🐶1_bit：還可以給第一個 li 元素中的某個標簽一個樣式，例如如下示例。
在這里插入圖片描述
🐶1_bit：結果如下。

👸小媛：又解鎖了一個新知識，了解了。

🐶1_bit：偽類還有很多，咱們可以通過這個鏈接查看其它的偽類點擊查看

二、偽元素

🐶1_bit：現在咱們開始講一下什么是偽元素。

👸小媛：還有偽元素呀？

🐶1_bit：對的，偽元素和偽類的理解概念類似，偽元素就是指模擬一個元素來實現某種效果。例如先看一個簡單的示例，咱們在一句話中，需要給開頭的第一個字標紅，這個時候常規的寫法如下。
在這里插入圖片描述
👸小媛：這個我懂，那偽元素呢？

🐶1_bit：偽元素就很簡單了，如下示例就可以直接使第一個字符編程綠色了。
在這里插入圖片描述
🐶1_bit：偽元素的寫法就是 標簽::偽元素，隨后即可對對應的樣式進行生效。

👸小媛：哇，真的好方便呀。

🐶1_bit：偽元素還可以使用 first-line（第一行）、before（在什么之前）、after（在什么之后）等，例如如下示例。
在這里插入圖片描述
🐶1_bit：以上示例中，第一個p標簽的文字為綠色、第一行（first-line）p標簽的顏色為紅色、在標簽之后（after）添加文本，其中 content 就是文本屬性，添加的文本是“在后面添加了文本”、最后一個為 before在什么之前添加文本。這些偽元素還可以給予樣式，顏色大小等，最終的演示效果如下：
在這里插入圖片描述
👸小媛：哇，原來是這么回事，我明白了。

🐶1_bit：這兩節的 css 相關內容咱們就說道這，現在有了基本的css知識點在之后的學習中會更加的舒服，咱們在之后還會開啟一個CSS學習的階段屆時將會更好的學習CSS 相關的內容，隨后就可以制作比較精美的網頁了。

👸小媛：迫不及待了。

【前端就業課第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解