-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfirst_letter_special_character.html
105 lines (105 loc) · 2.97 KB
/
first_letter_special_character.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/jquery-1.8.3.min.js"></script>
<style>
.main{
font-family: Source Code Pro,Microsoft YaHei;
text-align: left;
font-size: 18px;
font-weight: 500;
width: 80%;
margin: 0 auto;
background: #ccc;
}
p:first-letter{
color:#ff0097;
font-weight: 700;
}
.spec p{
margin:5px;
}
.tip{
color:#ff0097;
font-weight: 500;
}
</style>
<title>zhangqi_file</title>
</head>
<body>
<div class="main">
<h2>::first-letter简单的小实例</h2>
<h4>不是所有的字符都能单独作为::first-letter伪元素存在的</h4>
<div class="spec">
<p>······辅助</p>
<p>``````辅助</p>
<p>~~~~~~辅助</p>
<p>@@@@@@辅助</p>
<p>######辅助</p>
<p>$$$$$$辅助</p>
<p>%%%%%%辅助</p>
<p>^^^^^^辅助</p>
<p>&&&&&&辅助</p>
<p>******辅助</p>
<p>((((((辅助</p>
<p>))))))辅助</p>
<p>（（（（（（辅助</p>
<p>））））））辅助</p>
<p>______辅助</p>
<p>++++++辅助</p>
<p>======辅助</p>
<p>------辅助</p>
<p>[[[[[[辅助</p>
<p>]]]]]]辅助</p>
<p>【【【【【【辅助</p>
<p>】】】】】】辅助</p>
<p>{{{{{{辅助</p>
<p>}}}}}}辅助</p>
<p>::::::辅助</p>
<p>：：：：：：辅助</p>
<p>""""""辅助</p>
<p>““““““辅助</p>
<p>””””””辅助</p>
<p>;;;;;;辅助</p>
<p>；；；；；；辅助</p>
<p>''''''辅助</p>
<p>‘‘‘‘‘‘辅助</p>
<p>’’’’’’辅助</p>
<p>》》》》》》辅助</p>
<p>《《《《《《辅助</p>
<p><<<<<<辅助</p>
<p>>>>>>>辅助</p>
<p>,,,,,,辅助</p>
<p>，，，，，，辅助</p>
<p>......辅助</p>
<p>。。。。。。辅助</p>
<p>√√√√√√辅助</p>
<p>××××××辅助</p>
<p>¥¥¥¥¥¥辅助</p>
<p>￥￥￥￥￥￥辅助</p>
<p>♂♂♂♂♂♂辅助</p>
<p>♀♀♀♀♀♀辅助</p>
<p>？？？？？？辅助</p>
<p>??????辅助</p>
<p>!!!!!!辅助</p>
<p>！！！！！！辅助</p>
<p>………………辅助</p>
<p>………………辅助</p>
<p>******辅助</p>
<p>——————辅助</p>
<p>——————辅助</p>
<p>++++++辅助</p>
<p>||||||辅助</p>
<p>、、、、、、辅助</p>
<p>//////辅助</p>
<p>\\\\\\辅助</p>
</div>
<div class="tip">
总结下来就是，“赠品字符”包括：·@#%&*()（）[]【】{}:："“”;；'‘’》《,，.。？?!！…*、/\。正常直接可以作为伪元素的字符就是数字，英文字母，中文以及$以及一些运算符以及非常容易忽视的空格等。这里空格有必要再加粗强调下，很容易忽视的一个字符。
</div>
</div>
</body>
</html>