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; }

标题A

标题B

标题C

标题D

标题E

将alt值作为图像标题显示出来(貌似浏览器对这个功能支持的不好)

#alt img:before{ content: attr(alt); display: block; text-align: center; margin-top: 10px; }
袋鼠每天拥抱救命恩人