4

我已经在我的网站上设置了任何外部链接的样式，以便在指向我网站外任何域的链接之后自动添加一个图标：

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

我在页面上有一张图片，它打开了一个带有谷歌地图的灯箱，所以上面的代码认为它是一个外部链接，并在图片之后添加了图标。有没有办法基本上说来自 anotherdomain.com 的链接，不要应用样式？

我尝试将 maps.google.com 添加到上面的选项中，但没有成功。我不确定它是否支持多个值？

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

4

3 回答 3

0

您可以尝试使用: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 { 
 }

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

于 2016-07-22T14:38:26.633 回答
0

首先，随着大多数网站的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;
}

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

  1. 为此目的创建一个类：

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

  2. 使用无方案（或无协议）的 URL：

    //www.stackoverflow.com
于 2016-07-22T15:06:49.847 回答
0

: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>

于 2016-07-22T15:23:36.850 回答