CSS基础(part21)--CSS3伪元素选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part21)--CSS3伪元素选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必究
參考自：pink老師教案
CSS3偽元素選擇器
偽類選擇器：
| ::before | 在元素內部的前面插入內容 |
| ::after | 在元素內部的后面插入內容 |
偽類選擇器注意事項：
- before 和 after 必須有 content 屬性
- before 在內容前面，after 在內容后面
- before 和 after 創建的是一個元素，但是屬于行內元素
- 創建出來的元素在 Dom 中查找不到，所以稱為偽元素
- 偽元素和標簽選擇器一樣，權重為 1
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>偽元素</title><style>div {width: 200px;height: 200px;border: 5px solid blue;}div::before {content: "安徽";display: inline-block;width: 50px;height: 50px;background-color: pink;}div::after {content: "大學";display: inline-block;width: 50px;height: 50px;background-color: green;}</style> </head><body></body> <div>財經</div></html>頁面：
總結
以上是生活随笔為你收集整理的CSS基础(part21)--CSS3伪元素选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 24位rgb真彩色是什么意思(32位色彩
- 下一篇： CSS基础(part22)--2D转换