前面已經介紹過CSS偽類的知識，具體可見前文 CSS偽類知識詳解，
偽元素常常被誤解為偽類，主要在于他們的語法相似，都是對于選擇器功能的擴展，相似程度很高導致被混淆，
本文通過詳細介紹偽元素和常見的使用方法，最后也會分析下偽元素與偽類的基本區別，
基本描述
CSS偽元素也是應用于選擇器的關鍵字，允許改變被選擇元素的特定部分的樣式，
一般常見的如用于在元素的內容前后插入新的內容，或者改變首字母、首行的樣式等，
語法：selector:pseudo-element { property: value; }，
div::before {
content: '開始-';
color: red;
font-size: 15px;
}
如上代碼，即是我們常用的 ::after 偽元素，在div內部增加一塊 開始- 的內容作為div的第一個子元素，可以設定不同的樣式屬性，
常用偽元素
下面的串列，列出當前可用的偽元素：
| 偽元素 | 描述 |
|---|---|
| ::after | 作為選中元素的第一個子元素， |
| ::before | 作為選中元素的最后一個子元素， |
| ::first-letter | 選中塊元素第一行的第一個字母，應用樣式， |
| ::first-line | 選中塊元素的第一行，應用樣式， |
| ::selection | 應用于檔案中被用戶選中的部分，如使用滑鼠選中文本， |
| ::file-selector-button | 代表input(file)標簽按鈕，用來改變該按鈕樣式， |
| ::marker | 應用于list-item元素上的標記點的樣式， |
| ::slotted | 用于選定那些被放在HTML模板中的元素， |
| ::part | 應用于Web components中shadow-dom的任何匹配part屬性的元素， |
其中，::before 和 ::after 應該是我們使用最多的偽元素，而其他的偽元素也有各自的特點和作用，下面通過一個示例來展示其中幾個偽元素，
示例：
<div >
<span>中國中部的省份</span>
<ul>
<li>湖北</li>
<li>湖南</li>
</ul>
<input type="file" />
</div>
.province::first-letter {
color: #f00;
font-size: 20px;
}
.province::before {
content: '選擇'
}
::selection {
background-color: #ff0;
}
li::marker {
color: #f00;
}
input::file-selector-button {
border: 1px solid #f00;
font-size: 20px;
border-radius: 5px;
}
頁面呈現，如下圖：
以上代碼，使用了多個偽元素的實作：
- ::before 增加了一個文本內容
選擇， - ::first-letter 改變了第一字的字體大小，顏色變為紅色，并且是改變的
::before元素的文本，因為::before是第一行子元素的內容， - ::file-selector-button 改變了檔案上傳控制元件的按鈕樣式，增加紅色邊框、圓角、字體大小，
- ::marker 改變了串列元素，每行前面的圓點為紅色(默認是黑色)，
- ::selection 當滑鼠選中內容區域時，背景色會變為黃色，
注意：before偽元素作為第一個子元素，會被first-letter選中賦予樣式，
以后當我們想美化檔案上傳控制元件時，偽元素::file-selector-button也是一個可用的選擇，
::before 和 ::after
這兩個偽元素是我們前端開發中最常用的，本節專門詳述它們的基本用法，
::before 創建一個偽元素，作為所選中元素的第一個子元素；::after 創建一個偽元素，作為所選中元素的最后一個子元素，
它倆通常展示一塊文本內容，并且需要使用 content 屬性來為元素添加內容，默認為行內元素，
一般都是用于在元素內部的首尾插入一段內容，文字或者小圖示等等，
注意：不能應用于替換元素，如img、br等元素，
content屬性
content屬性主要用于在 ::before 和 ::after 兩個偽元素中插入內容，
它的取值范圍：
- none：無偽元素
- normal：基本等于none
- string：字串文本內容
- uri：指定外部資源，一般是圖片，資源無法顯示則被忽略或顯示占位符
- counter：計數器函式
- attr(X)：將元素的X屬性以字串形式回傳，
- open-quote|close-quote：前后引號，如雙引號、單引號等，
- no-open-quote|no-close-quote：不產生內容
示例
<div >
<label>請選擇您所在的城市</label>
</div>
.wrap::before {
content: '開始-';
color: #f00;
}
.wrap::after {
content: url(./home.png);
}
label::before{
content: open-quote;
color: #f00;
}
label::after{
content: close-quote;
color: #f00;
}
頁面呈現，如下圖：
以上代碼，
在 div.wrap 前面添加文本內容，紅色的文字 開始-；
在 div.wrap 后面添加圖片資源，home.png;
通過給 label 元素前后添加 open-quote 和 close-quote 的屬性值，增加了雙引號，并且能設定樣式屬性為紅色，
偽元素的呈現
另外，我們需要了解到，偽元素之所以加個偽字，在于它雖然創建了新的元素作為某個選中元素的子元素，但它并不存在于DOM檔案樹中，而僅僅只是一種邏輯上的虛擬呈現，
不過，在當前瀏覽器的開發者工具中可以查看到部分偽元素，這可以方便我們進行除錯，
如上圖，左邊dom檔案結構中并沒有偽元素，右邊在瀏覽器的開發者工具里能看到 ::before、::after 和 ::marker 三個偽元素，
偽元素與偽類的區別
偽元素與偽類由于在寫法上比較類似，所以常常被混淆，多見于把偽元素說成是偽類，
雖然并沒有啥大的影響，但我們也有必要了解下它們的區別：
- 偽類根據狀態改變元素樣式，只是對選擇器的擴展和彌補不足；而偽元素則是在邏輯上創建了虛擬的新元素，并可以給新元素添加樣式，
- 偽類使用單冒號，CSS3在偽元素中引入雙冒號，是為了區分偽類和偽元素，偽元素同時也支持單冒號，為了方便區分，可以給偽元素一直使用雙冒號，
- 一個選擇器中可以同時跟隨多個偽類并一起起作用，但偽元素如果在選擇器后跟隨多個則不會起作用，
/*對第一個div元素應用hover狀態的樣式*/
div:first-child:hover {
color: #ddd;
}
/*無效，沒有偽元素會產生*/
.province::before::first-letter {
content: '選擇';
color: #f00;
font-size: 20px;
}
以上代碼，當使用多個偽元素時，代碼將失效，不會創建新元素，樣式也不起作用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549349.html
標籤：其他
上一篇：前端設計模式——MVC模式