CSS选择器创建个性化链接样式的教程

CSS选择器创建个性化链接样式的教程,第1张

概述我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。CSS的选择器是个很有用的技术,通过它们,我们可以很容易的实现某些效果。今天我们通过制作个性化链接样式来介绍一下CSS的属性选择器。先看一下演示吧:正如上图中看到…

我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。CSS的选择器是个很有用的技术,通过它们,我们可以很容易的实现某些效果。今天我们通过制作个性化链接样式来介绍一下CSS的属性选择器。

先看一下演示吧:

正如上图中看到的那样,我们为每种链接定义了不同的样式:当链接a的href属性的值为"mailto"邮件链接的时候,在该链接后面显示一个邮件的图标;当链接为word文件时,后面显示word文档图标;当链接地址为mp3的时候,显示音乐播放图标;当链接地址包含"qianduan.net"的时候,就显示一个首页图标……

其实实现这样的功能非常容易,我们先来看看CSS的属性选择器的语法:

语法 用法 CSS版本
[att=val] 属性"att"值为"val"的元素 CSS 2.1
[att] 包含"att"属性的元素 CSS 2.1
[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb” CSS 2.1
[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 CSS 2.1
[ns|attr] 名字空间下的"attr"属性的元素,不常用 CSS 3
[att^=val] 属性att的值以"val"开头的元素 CSS 3
[att*=val] 属性att的值包含"val"字符串的元素 CSS 3
[att$=val] 属性att的值以"val"结尾的元素 CSS 3

需要注意的是,css选择器无论CSS 2.1版本还是CSS 3版本,ie7和ie8都支持,webkit、Gecko核心及Opera也都支持,只有ie6以下浏览器才不支持。 总结

以上是内存溢出为你收集整理的CSS选择器创建个性化链接样式的教程全部内容,希望文章能够帮你解决CSS选择器创建个性化链接样式的教程所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1026232.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存