<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3属性选择器小案例</title>
<style>
a[href$=html]:after{
content: "网页文件";
color: green;
}
a[href$=jpg]:after{
content: "图片文件";
color: green;
}
</style>
</head>
<body>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a>
</body>
</html>
演示
新建一个页面案例
<title>CSS3属性选择器小案例</title>
在这里给它几个链接
<a href="anli.html">网站首页</a>
<a href="anli.html">网站首页</a>
拖进来一张图片到项目中，我们把anli.html改成图片的地址
<a href="1.jpg">网站图片</a>
这样页面上就有两个链接
第一个指向网站网页的链接，第二个指向我们的图片
我们来分析一下，它们都有一个href这个属性，我们就可以通过刚刚我们所学的，判断它的这个结尾字符，因为它们的这个第一个是这个网页问价，第二个是图片文件，通过判断它的属性的尾字符来给它追加一个文字，那么是以html5结尾的我们就给它追加一个文字，是网页文件，那么是jpg的呢就追加一个是图片文件。
我们怎样来实现
首先我们要选择中这个href，href的这个结尾是以html结束的。那么追加文字呢我们用after
a[href$=html]:after{
content: "网页文件";
color: green;
}
那么这是这个，下一个。
a[href$=jpg]:after{
content: "图片文件";
color: green;
}
好，这样只要是我们这个，它就会在我们图片的后面呢加上一个文字，图片文件，那么只要是以图片结尾的都会加到。我们看一下。
是网页的话就是网页文件，是图片的话就是图片文件。我们可以复制一下。
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a>
我们来看一下
那么这就是这种，这个选择器的灵活使用案例，当然它的使用方法和范围远远不止这么一点。
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
