使用CSS设置外部链接样式

最新推荐文章于 2024-03-29 03:55:46 发布

culuo8053

最新推荐文章于 2024-03-29 03:55:46 发布

阅读量3.6k

点赞数 1

文章标签： css java linux web js ViewUI

原文链接：https://davidwalsh.name/external-links-css

版权

Styling external links is a common practice on most informational sites likes Wikipedia. As a user, it's nice to know when you're being sent to another resource. Many sites do the external links check on the server side, adding a `rel=external` attribute value or `external` class to external links. In some cases that isn't possible or plausible. After trolling around the interwebs, I found the following useful CSS snippet for styling external links:

在大多数信息网站(如Wikipedia)上，对外部链接进行样式设置是一种常见做法。作为用户，很高兴知道何时将您发送到其他资源。许多站点都在服务器端进行外部链接检查，并向外部链接添加了rel = external属性值或external类。在某些情况下，这是不可能或不可能的。绕过互连网之后，我发现了以下用于样式化外部链接的有用CSS代码段：


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

First you have to qualify the start of the link, then qualify the domain. Internal links wont match and external links wont match the comparison. A useful snippet and something to keep in your library in case you need it!

首先，您必须限定链接的开头，然后限定域。内部链接不匹配，外部链接不匹配比较。一个有用的代码段，以及一些可以保存在您的库中的文件，以备需要时使用！