伪元素
2020-01-31 本文已影响0人
钢笔先生
Time: 20200131
用于向某些选择器添加特殊效果。
伪元素的类型
- :first-letter
- :first-line
- :before
- :after
截屏2020-01-31下午2.30.11.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 type="text/css">
body {
text-align: center;
}
.demo {
width: 300px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px;
}
.demo::first-letter {
font-size: 40px;
font-weight: bold;
/* 下沉 */
float: left;
}
</style>
</head>
<body>
<div class="demo">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolore maiores at
pariatur porro ad officiis a,
soluta unde commodi maxime nam reiciendis
itaque aliquid illum. Fuga culpa ducimus
sed ut.
</div>
</body>
</html>
效果：
截屏2020-01-31下午2.39.32.png
注意，用两个冒号，这比较统一，虽然用一个冒号也可以，注意和伪类选择器区分。
第一行样式调整
/* 设置第一行的颜色 */
.demo::first-line {
color: #0f0;
}
效果：
截屏2020-01-31下午2.42.26.png
before && after
这是非常强大的属性，相当于新增了两个层，能够做出非常酷炫的效果。
会在该元素开始之前和之后添加相应的内容。
<!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 type="text/css">
body {
text-align: center;
}
.demo {
width: 300px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px;
}
/* 设置第一个字母，汉字的样式 */
.demo::first-letter {
font-size: 40px;
font-weight: bold;
/* 下沉 */
float: left;
}
/* 设置第一行的颜色 */
.demo::first-line {
color: #0f0;
}
.demo01 {
width: 600px;
border: 1px solid #ccc;
margin: 10px auto;
padding: 10px;
text-align: center;
display: block;
}
.demo01::before {
content: url(../panda.jpg);
display: block;
}
.demo01::after {
content: url(../css3.png);
display: block;
}
</style>
</head>
<body>
<div class="demo">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolore maiores at
pariatur porro ad officiis a,
soluta unde commodi maxime nam reiciendis
itaque aliquid illum. Fuga culpa ducimus
sed ut.
</div>
<div class="demo01">
玩转CSS3新特性
</div>
</body>
</html>
注意，在::before和::after中content是必须的属性。
显示效果如下：
截屏2020-01-31下午2.53.34.png
总结
伪类选择器是选择已经有的原子级的标签，比如例子中的<li>。
而伪元素则是，事实上不存在这样的标签，比如一个文本段落中的第一个字符，第一行等。使用伪元素，我们可以更细粒度的操作样式。
END.
