文章目錄
- hover（偽類）
- after（偽類）
- 往期回顧
hover（偽類）
偽類指的是用冒號加的
hover樣式指的是，當用戶光標移動到設定區域后，所執行的用法
如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中國移動</title><style>.c2{color: red;font-size: 18px;}.c2:hover{color: green;font-size: 50px;}.c3{height: 300px;width: 500px;border: 1px solid red;}.c3:hover{border: 3px solid gainsboro;}.download{/*默認隱藏起來的*/display: none;}/*這句話的意思是，只有當光標觸碰到app這個標簽時， 下面download標簽下的東西才會被展示*//*下面的某一個標簽改變*/.app:hover .download{/*讓他展示出來*/display: block;}.app:hover .text{color: red;}</style>
</head>
<body><div class="c2">聯通</div><div class="c3">廣西</div><div class="app"><div class="text">下載APP</div><div class="download"><img src="/static/download.png" alt=""></div></div>
</body>
</html>
after（偽類）
作用：在標簽的尾部給你加點東西
- 一般很少直接用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中國移動</title><style>.c1:after{content: "456";}</style>
</head>
<body><div class="c1">123</div><div class="c1">一二三</div>
</body>
</html>
注意：只有456是自動給你追加的，123都是自己寫的
- 一般來說，是用在清除浮動這一方面的（很重要的應用）
- 一般來說這個都是這樣命名的
clearfix
- 一般來說這個都是這樣命名的
.clearfix:after{content:"";display: block;clear: both;}
這樣子只要是應用了clearfix這個標簽的，都會幫你清除浮動
往期回顧
1.【快速開發網站】
2.【瀏覽器能識別的標簽1】
3.【瀏覽器能識別的標簽2】
4.【瀏覽器能識別的標簽3】
5.【瀏覽器能識別的標簽4】
6.【案例1：用戶注冊】
7.【案例2：用戶注冊改進】
8.【快速了解 CSS】
9.【常用選擇器概念講解】
10.【CSS基礎樣式介紹1】
11.【CSS基礎樣式介紹2】
12.【CSS基礎樣式介紹3】
13.【CSS基礎樣式介紹3】
14.【案例 小米商城頭標】
15.【案例 小米商城頭標總結】
16.【案例 小米商城二級菜單】
17.【案例 商品推薦部分】
詳解)
