<!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>
我们来看一下
那么这就是这种,这个选择器的灵活使用案例,当然它的使用方法和范围远远不止这么一点。