使用CSS标注外部链接的巧妙方法

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

/* 详细版 */
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 等任何你想采用的方法! */
}

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

阅读余下内容
 

2条回应:“使用CSS标注外部链接的巧妙方法”

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号