Punk ProjeKt

简要:CSS3可以通过设置a[href^="×××"]，a[href$="×××"]（请注意一个是^号，另一个是$号）进行链接地址的前项，后项匹配。换句话说，使用a[href^="×××"]则会从链接地址的前面开始判定，一旦以×××开头，则该链接符合其设定要求；a[href$="×××"]则从链接地址的后面开始判定，一旦以×××结尾则符合该设定要求。

此方法在IE下无效，请选择比IE强N倍的Firefox浏览器。

有了这个规则，就可以进行各种链接的不同样式设定了。

譬如要使本站内部链接和本站以外的链接具有不同的样式，则可通过如下定义进行区分。

/*—外部链接样式—*/
a[href^="http:"]{
background: url(link.png) no-repeat left center;
padding-left:20px;
}

/*—内部链接样式—*/
a[href^="http://pp.punkid.cn"],a[href^="http://pp.punkid.cn"]{
background: Red;
background-image: none;
color:#fff;
padding-left:0;
}

一旦链接是http开头，即普通的网页地址，则与第一段的CSS匹配，而本地链接因为匹配了第二段的CSS规则(以http://pp.punkid.cn或http://pp.punkid.cn开头)，从而忽略第一段CSS内容，继而使得外部链接和本地链接予以区分。

同样我们可以进一步把邮箱地址进行区分

a[href^="mailto:"]{
background: url(mail.png) no-repeat left center;
padding-left:20px;
}

凡是mailto形式链接，则被赋予该规则

如果我要在网站上贴出自己的MSN联系方式，而不希望MSN的邮箱也以邮件地址样式出现的话怎么办呢？我们可以通过a[href$="×××"]进行后项匹配，即凡是符合@hotmail.com的邮箱都划定为MSN帐号。

a[href$="@hotmail.com"]{
background: url(msn.png) no-repeat left center;
padding-left:20px;
}

根据这个规则，我们甚至可以对各种文件类型的链接进行区分了。

/*—凡是以doc后缀结尾的链接，则划定为word文档形式—*/
a[href$=".doc"]{
background: url(word.png) no-repeat left center;
padding-left:20px;
}

/*—凡是以pdf后缀结尾的链接，则划定为PDF文件形式—*/
a[href$=".pdf"]{
background: url(pdf.png) no-repeat left center;
padding-left:20px;
}

/*—凡是以zip后缀结尾的链接，则划定为zip文件形式—*/
a[href$=".zip"]{
background: url(zip.png) no-repeat left center;
padding-left:20px;
}
你还可以设定更多的…..

几行CSS代码就搞定了链接的各种样式，比起用js等方法判定高效多了！这是一个示例网页。

注:这是从CSS Mastery一书中看到的一个CSS 3小技巧,强烈建议你阅读一下这本书，本站提供下载了的。下载页面： 《CSS Mastery》电子版下载