我已经为我网站上的任何外部链接设置了样式，以便在链接后自动添加一个图标，指向我网站外的任何域，使用：
a[href^="http://"]:not([href*="website.com"]):after {
font-family: "FontAwesome";
content: "f08e";
font-size: 10px;
padding-left: 2px;
}
我在页面上有一张图片，它打开了一个带有谷歌地图的灯箱，所以上面的代码认为这是一个外部链接，并在图片后面添加了图标。有没有一种方法可以基本上说来自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.stackeexchange.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
您可以尝试使用: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 {
}
注意：我还没有试过这个。
: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>