2-1使用选择器在页面插入文字和图像
给所有的h2前面插入文本,当content的值分别为none和normal时表现一样,即不插入内容
#text h2:before{
content: "COLUMN";
color: #fff;
background-color: orange;
font-family: "Comic Sans MS",sans-serif;
padding:1px 5px;
margin-right: 10px;
}
#text h2.egNone:before{
content: none;
}
#text h2.egNormal:before{
content: normal;
}
这是h2标题
这是h2标题
这是h2标题class="egNone"
这是h2标题class="egNormal"
这是h2标题
插入图像,标题C前面的图是背景图片,打印时可选择是否显示
#img h2:after{
content: url("new.png");
width: 20px;
}
#img h2:nth-child(3):after{
content: normal;
}
#img h2:nth-child(3){
height: 3em;
background: url("new.png") no-repeat;
padding:30px 0 0 80px;
}
将alt值作为图像标题显示出来(貌似浏览器对这个功能支持的不好)
#alt img:before{
content: attr(alt);
display: block;
text-align: center;
margin-top: 10px;
}