#06你認真學了css？（基本樣式6：偽類和偽元素）

05-18

來自專欄 Miyas 技術學習小記

文檔閱讀：

總結偽類與偽元素 | AlloyTeam?

www.alloyteam.com

前文回顧：

miya Wang：#00你認真學了css？?

zhuanlan.zhihu.com

一、偽類：

1、定義：偽類用於當已有元素處於的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化

2、類型：

3、應用場景

用偽類元素進行效果展示

（1）link visited hover active 順序

/* 未訪問的鏈接 */a:link{ color: blue;}a:visited{ color: green;}/* 點擊後滑鼠脫離，獲得焦點的鏈接 */a:focus{ color: grey;}/* 滑鼠懸停時，內容顏色獲得紅色 */a:hover{ color: red;}/*選擇活動鏈接*/a:active{ color: pink;}

（2）first-child VS first-of-type

h1:first-child: 選擇是h1並且它是長子的元素
h1:first-of-type: 選擇是h1並且它是它父親里h1類型中的長子的元素

關於first-child VS first-of-type的使用在之前的css系列博客文章中有詳細解釋：

miya Wang：#00你認真學了css？?

zhuanlan.zhihu.com

二、偽元素：

1、定義：偽元素用於創建一些不在文檔樹中的元素，並為其添加樣式

2、類型：

如：

3、:before 和 :after（也可以寫::before 和 ::after）

<div class="box"> <p>這是第一段</p> </div> <style> .box:before{ content: start } .box:after{ content: end } </style>

使用偽元素before和after的好處：

可以在後台發現，p的前後分別出現::before和::after。html的dom樹中原本沒有::before和::after，現通過css樣式添加，使其在dom樹中添加這兩個元素。
用添加::before和::after 的目的是為了省標籤。::before生成的效果，所在的位置位於父元素（如box）的第一個子元素，::after則位於父元素（如box）的最後一個子元素，即在html的dom樹上多了兩個子元素，這兩個子元素無需在html中體現，只需在css中表示即可。
::before和::after所展示的效果相當於一個行內元素（注意行內元素的一些特性）
其中content 是必不可少

4、偽類選擇器的應用場景：

（1）偽類選擇器應用於清除浮動

.clearfix:after { content:; display:block; clear:both;}

詳細解釋請回看之前我寫得關於浮動的副作用和解決辦法：

miya Wang：#03你認真學了css？（基本樣式3：浮動+定位）?

zhuanlan.zhihu.com

（2）偽類選擇器可作為替代標籤

用代碼替代圖片，如使用css3實現一個帶邊框的三角符

思路：邊框+三角符號的組合

先確認邊框樣式：

.bubble{ position: relative; padding: 10px; border-radius: 3px; /*可填可不填*/ background: #fff; border: 1px solid #000; display: inline-block; }<body> <div class="bubble"> hello world </div></body>

再確認三角樣式：

.bubble:before{ content:; width: 10px; height: 10px; border-left: 1px solid #000; border-top: 1px solid #000; background: #fff; display: inline-block; position: absolute; transform: rotateZ(45deg); top: -6px; }<body> <div class="bubble"> hello world </div></body>

這裡基礎的三角樣式我們在之前已經有涉及過怎麼使用：請戳??

miya Wang：#01你認真學了css？（基本樣式1）?

zhuanlan.zhihu.com

使用偽元素怎麼實現三角符號（css3 ）：

基礎代碼：（關於三角形的位置參數可以使用頁面後台進行調試）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .bubble{ position: relative; padding: 10px; border-radius: 3px; /*可填可不填*/ background: #fff; border: 1px solid #000; display: inline-block; } .bubble:before{ content:; width: 10px; height: 10px; border-left: 1px solid #000; border-top: 1px solid #000; background: #fff; display: inline-block; transform: rotateZ(45deg); position: absolute; top: -6px; } </style></head><body> <div class="bubble"> hello world </div></body></html>

結果：

運用以上知識舉一反三，實現以下效果：

代碼請戳：

wxq393/project_work?

github.com

（3）偽類選擇器應用於element：checked（勾選住的一個狀態）

即input元素的自定義重要屬性checkbox或者radio，實現一個自定義的樣式

如：笑臉切換

今天的心情: <input type="checkbox"><style>input[type=checkbox]{ -webkit-appearance: none; /*去掉未勾選的方框默認樣式*/ appearance: none; background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat; display: inline-block; width: 20px; height: 20px; background-size: contain; /*背景圖片的大小*/ vertical-align: middle; outline: none;}/*勾選之後的狀態*/input[type=checkbox]:checked{ -webkit-appearance: none; appearance: none; background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat; display: inline-block; width: 20px; height: 20px; background-size: contain; vertical-align: middle; }</style>

好處：

沒有加js
使用該屬性樣式，對於input來說已經實現勾選狀態，自定義加一些自己的圖片，自動載入信息

（4）偽類選擇器應用於字體圖標

A、為什麼針對字體庫而來的字體，我們可以調整它的字體大小和顏色？

B、完整代碼如下：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css"></head><body> <span class="iconfont icon-jirengulogojichu2"></span> <style> .iconfont{ font-size: 100px; color: red; } </style></body></html>

在css中添加這個

/* e605為字體庫中的特有的一種編碼形式：unicode碼 */.icon-jirengulogojichu2：before{content:e605;}

即：