Question

我已经设定了我网站上的任何外部链接，以便在链接到我网站上的任何域后自动添加图标：

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添加到上面的选项中，但它无效。我不确定它是否支持多个值？

任何帮助将不胜感激！在此先感谢!!

Answer 1

首先，大多数网站都朝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 ; }

OR，更具体地说，在这种情况下

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;
}

使用无方案（或无协议）网址：
```
//www.stackoverflow.com
```

Answer 2

您可以尝试使用:matches选择器来识别您想要匹配的网站，并使用现有代码设置所有其他网站的样式，然后添加图标（因此与当前方法相反）。

a[href^="http://"]:after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

a[href^="http://"]:matches([href*="website.com"], [href*="otherwebsite.com"]):after { 
 }

注意：我实际上没有尝试过这个。

Answer 3

:not可以OR方式链接，只需一个接一个地添加即可。

/* chained :not syntax */
a[href^="http://"]:not([href*="website.com"]):not([href*="maps.google.com"]):after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

/* Demo purposes only */
a {display:inline-block;text-decoration:none!important;padding:0.75em;color:inherit!important;border:1px solid}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<a href="http://website.com">My Website</a>
<a href="http://google.com">Google</a>
<a href="http://facebook.com">Facebook</a>
<a href="http://maps.google.com">Google Maps</a>

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

3 个答案: