CSS3属性选择器案例教程

源代码
<!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>

我们来看一下


那么这就是这种,这个选择器的灵活使用案例,当然它的使用方法和范围远远不止这么一点。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值