使用CSS选择器创建个性化链接样式
作者:神采飞扬 来源:前端观察 发布时间:2009-06-02 13:07:00
我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。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以下浏览器才不支持。
好了,让我们来实现这些样式吧:
1.链接的基础样式
首先我们准备了一个CSS Sprites的图片,我们将所有的图标都整合到这一个a.gif中。
a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;
color:#369;
line-height:24px;
}
这样,我们就为所有的链接定义了默认的样式了,所有的链接右侧都会显示一个红色的小箭头图标。
猜你喜欢
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1。如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- 这个验证类的完成有很长时间了,一直没有分享给大家使用了这么长时间之后感觉挺顺手,用于一些不需要特殊效果的表单验证个人认为已经足够了,还是挺好
- 阅读Chapter 1 清单Chapter 2 标题总览:不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性
- 这也是老早前整理的了,也贴出来吧:1. showModalDialog和showModelessDialog的异同
- 站长们是不是还在为空间不支持域名绑定到子目录而发愁呢?买了个便宜也不错的空间,用的还满意,准备再开几个网站,却发现空间程序太落后,无法支持域
- 当我们建立一个数据库时,并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时,尤其是在进行数据检验、净化和转换时,将会面临很大
- 用analyze进行处理,定期进行处理ANALYZE [LOCAL | NO_WRITE_TO_BINLOG] TABLE tb1_name
- 此代码适合你做网站用,普通朋友可以不用理这个东西!ASP:<%dim objXMLHTTP, qq, pwd qq = &
- 实现原理:将用户信息保存在数据库中,若能在数据库中检索到用户输入的姓名和口令,就允许访问该一页面。代码如下:protect.asp<h
- 以前没见过这个效果,滚动纵向滚动条看看效果就明白了这样的效果,广告商应该比较喜欢。<!DOCTYPE html PUBLIC &quo
- 最近随着狂风计划的席卷,我也终于开始橱窗产品位列表展示的编码工作,这只是一个改进项目,因此有原代码可供参考。但是当我打开原代码模板的时候便愣
- 1、设置数据库模式为简单模式:打开SQL企业管理器,在控制台根目录中依次点开Microsoft SQL Server-->SQL Se
- 问:怎样才能取得局域网中所有SQL Server的实例?答:请参考以下的具体步骤:SmoApplication.EnumAvailableS
- 自动上次ymPrompt组件发布,自己就曾发现在IE8下遮罩的半透明滤镜有时无效的问题,后来也有网友提出过这个问题,但自己一直也没有太多关注
- 文件名:Awa_temp.Class.asp 代码如下:<% 'Crazy蛙!模板操作类 '作者C
- 1.SYS用户具有DBA权限,并且拥有SYS模式,只能通过SYSDBA登陆数据库。是Oracle数据库中权限最高的帐号SYSTEM具有DBA
- 一:最近,经常碰到有网友问,如何使vbscript和javascipt传递变量。不知道为什么要这么做。因为每一种脚本语言几乎都可以完成所需要
- 若对于同一数据库实例中的两个数据库进行同步则直接对数据库表创建Trigger。SQL Server 2005的联机帮助:Trigger on
- “正则表达式”对象,我们就可以非常方便的对各种数据进行合法性的校验了。首先,让我们来了解一下究竟什么
- MySQL是一个非常流行的小型关系型数据库管理系统,2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的中