使用 CSS 给网站的外链添加背景箭头标识 - 文章教程

使用 CSS 给网站的外链添加背景箭头标识

发布于 2018-04-01 字数 1346 浏览 2139 评论 0

经常在网站上看到,某些网站外链会在后面显示一个弹出的箭头,提醒用户这个链接非本站链接,这样的效果用正则可以实现,今天就用 CSS3 的选择器来实现。

使用 CSS 给网站的外链添加背景箭头标识

网站外部链接样式是一种常见的做法,尤其在大多数信息网站比如百度百科等。 作为一个用户,让你什么时候被链接到另一个站外的网页。 许多网站都在服务器端进行检查的外部链接,添加一个 rel=external 的属性值或 external 类的外部链接。 在某些情况下是可行的。 那么用 CSS3 的选择器也可以这么做,请看下面的代码:

a[href^="http://"]:not([href*="wenjiangs.com"]),
a[href^="https://"]:not([href*="wenjiangs.com"]),
a[href^="//"]:not([href*="wenjiangs.com"]){
    /* external link styles
    use :before or :after if you want! */
}

首先你要从链接开始,然后限定域名。 内部链接和外部链接的习惯习惯匹配的匹配比较。 有用的片段和一些能够让你在图书馆的情况下你需要它。

例如如果有一个链接我的网站

http://external.com/?referer=mysite.com

你可以添加任何引用模式你使用另一个模式匹配:

a[href*="?referer"] {
 /* external styles */
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0