首页
技术分享
实用工具 发布文章 新浪微博 Github

在一些像维基百科这样的信息类网站上,把外部链接用某种形式标明出来是一种常见的做法。对于浏览者,这能方便的告诉他们将访问一个外部资源。很多网站会在服务端检查外部链接,并在链接上加入rel=external属性或external类来区别这些链接。但有些情况下你无法这样做或不该这样做。在经过了在网上的一番搜索后,我发现了这个非常高效简洁的标注外部链接的CSS代码:

1
2
3
4
5
6
7
8
9
10
/* 详细版 */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]),
a[href^="//"]:not([href*="mysite.com"]), {

}
/* 精简版! */
a[href*="//"]:not([href*="mysite.com"]) {
/* 这里放置外部链接的风格样式,可以使用 :before 或 :after 等任何你想采用的方法! */
}

这段代码首先是找到链接的开始处,然后是域名排除。比较后只有外部域名被样式选择器捕获。好的技巧方法都应该放到自己的知识库里,有朝一日会用得着的!