一蒜田、CSS3的新特性
1.1、偽元素選擇器（重點）
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標簽元素选泻，而不需要HTML標簽冲粤，從而簡化HTML結(jié)構(gòu)。
| 選擇符 | 簡介 |
|---|---|
| ::before | 在元素內(nèi)部的前面插入內(nèi)容 |
| ::after | 在元素內(nèi)部的后面插入內(nèi)容 |
-
和
創(chuàng)建一個元素页眯，但是屬于行內(nèi)元素
- 新創(chuàng)建的這個元素在文檔樹中是找不到的梯捕，所以我們稱為
-
element::before{}
- before和after必須有
- before在父元素內(nèi)容的前面創(chuàng)建元素，after在父元素內(nèi)容的后面插入元素窝撵。
-
和
一樣傀顾，權(quán)重為1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 權(quán)重是2 */
div::before {
/* 這個content是必須要寫的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小豬佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
image.png
1.2 偽元素選擇器使用場景1：偽元素字體圖標
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器使用場景-字體圖標</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: '?'; */
content: '\e91e';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.3 偽元素選擇器使用場景2：仿土豆網(wǎng)顯示隱藏遮罩案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器使用場景2-仿土豆網(wǎng)顯示隱藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: '';
/* 隱藏遮罩層 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 當我們鼠標經(jīng)過了 土豆這個盒子碌奉，就讓里面before遮罩層顯示出來 */
.tudou:hover::before {
/* 而是顯示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
1.4短曾、偽元素選擇器使用場景3：仿元素清除浮動
- 額外標簽法也稱為隔墻法，是W3C推薦的做法赐劣。
- 父級添加overflow屬性
image.png
image.png
image.png
