before && after 选择器
middle content1
middle content2
middle content3
before实在元素的前面添加content内容，
可以是字符串，url(音频，图片，media)，
after实在元素的后面添加这些内容
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
|
//上图代码展示
<style>
#box1 p{
font-size:15pt;
}
#box1 p:before{
content:"Before Content";
color:yellow;
background-color:red;
padding:10px;
font-size: 20pt
}
#box1 p:after{
content:"After Content";
color:blue;
background-color:red;
padding:10px;
}
</style>
<div id="box1">
<p>middle content1</p>
<p>middle content2</p>
<p>middle content3</p>
</div>
|
!important 最高权重
this is box2
this is span
this is box3
对比box2 和box3内的span和label的字体可以看出
！important将元素的优先级被提高了。
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
|
//上图代码展示
<style>
#box2{
padding:20px;
border: 1px solid red;
}
#box2 span{
font-size:18pt;
}
span{
font-size:10pt !important;
}
#box3{
padding:20px;
border: 1px solid brown;
}
#box3 label{
font-size:20pt;
}
label{
font-size:10pt;
}
</style>
<div id="box2">
this is box2
<span>this is span</span>
</div>
<div id="box3">
this is box3
<label>this is span</label>
</div>
|
近期评论