我们在网上经常会看到最新的文章列表标题后面都会有个“推荐”，“New”等诸如此类的图片，如下图：
上节课，我们学习了content属性配合选择器:before和:after的使用方法，知道我们可以使用CSS3.0可以对指定的元素追加或前置内容，那么能不能通过此方法来插入图像呢？
答案是肯定的：能！语法如下：
li:after{ content:url(new.gif); } //其实咱们就是把content的值直接改为url并设置图片地址即可，通过after就把图片插入到其元素之后了
【注】目前Chrome、FireFox、Opera、Safari和IE9均支持插入图片功能，IE8中只支持插入文字功能；
案例如下：
比如我们要实现将ul列表的前三个子元素li加入包含“推荐”字样的图片，我们只需要两步便可实现：
1、在所有的li之后追加“推荐”图片；
2、选择第三个li，并将其之后的所有的兄弟元素li所追加的内容content属性设置为none后，便实现了只有前三个li有“推荐”图片；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-插入文字 | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
ul{list-style:none; overflow:hidden;}
ul li{height:22px; line-height:22px;}
ul li:after{content:url(http://www.w3cfuns.com/static/image/stamp/006.small.gif);}/*在所有的li之后追加“推荐”图片*/
ul li:nth-child(3)~li:after{content:none;}/*选择第三个li，并将其之后的所有的li所追加的内容content属性设置为none后，便实现了只有前三个li有“推荐”图片*/
</style>
</head>
<body>
<ul>
<li>创新工场招聘web前端工程师</li>
<li>（长沙）特米网诚聘：WEB前端开发工程师</li>
<li>北京腾讯急招前端开发</li>
<li>百度移动平台部web前端研发工程师</li>
<li>傲游浏览器诚聘英才</li>
<li>巨人网络急聘WEB前端开发工程师</li>
<li>搜狗公司招聘网页重构工程师</li>
<li>乐唐天地 - Web前端开发工程师</li>
<li>淘宝杭州招聘前端开发工程师</li>
<li>泰克贝思招聘网站美工</li>
</ul>
</body>
</html>
1866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
