css – 防止某些URL接收外部链接样式

2023年6月23日 194次阅读

我已经设置了我网站上的任何外部链接,以便在链接到我网站上的任何域后使用以下内容自动添加图标：

a[href^="http://"]:not([href*="website.com"]):after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

我在页面上有一个图像,打开一个带有Google Map的灯箱,因此上面的代码认为它是一个外部链接,并在图像后面添加了图标.有没有办法从anotherdomain.com基本上说出链接,不适用这种风格？

我尝试将maps.google.com添加到上面的选项中,但它无效.我不确定它是否支持多个值？

任何帮助将不胜感激！提前致谢！！

最佳答案 首先,大多数网站都采用https：//方向,您可能需要调整选择器.或者考虑添加https：//选项.

a[href^="http://www"],
a[href^="https://www"]

或者,更简单

a[href^="http"]

我用来区分需要外部样式的链接和不需要外部样式的链接的一种方法是确保我网站上的外部链接有www.

a[href^="http://www"]::after,
a[href^="https://www"]::after

…任何其他链接(例如您的anotherdomain.com或maps.google.com)都不匹配.

我说这只是一种方法,因为你仍然需要注意那些需要没有www的外部链接样式的网站(例如,meta.stackexchange.com)

另一种选择是简单地覆盖原始规则：

a[href*="maps.google.com"] { ... !important ; }

或者,更具体地说是在这种情况下

a[href*="maps.google.com"]::after {
    font-size: 0 !important;
    padding-left: 0 !important;
}

在锚元素上隐藏外部样式的两个通用解决方案是：

>为此目的创建一个类：

.no-external-link-icon {
    background-image: none !important;
    padding-left: 0 !important;
}

>使用无方案(或无协议)URL：

//www.stackoverflow.com
点赞