阻止某些 URL 接收外部 link 样式

Question

我在我的网站上设置了任何外部 link 的样式，以在 link 之后自动添加一个图标到我网站以外的任何域，使用：

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

我在打开一个灯箱的页面上有一张图片，里面有一个 Google 地图，所以上面的代码认为它是一个外部 link 并在图片后面添加图标。有没有办法基本上说 anotherdomain.com 中的 links，不应用样式？

我尝试在上面的选项中添加 maps.google.com，但没有成功。不知道是否支持多值？

如有任何帮助，我们将不胜感激！提前致谢！！

Answer 1

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

首先，大多数网站都朝着 https:// 方向发展，您可能需要调整选择器。或者考虑添加 https:// 选项。

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

或者，更简单

a[href^="http"]

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

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

...任何其他 link（例如您的 anotherdomain.com 或 maps.google.com）都不匹配。

我说这只是一种方法，因为您仍然需要留意需要没有 www 的外部 link 样式的网站（例如，meta.stackexchange.com）

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

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

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

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

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

为此创建一个 class：

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

使用无方案（或无协议）URL：
```
//www.whosebug.com
```

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 接收外部 link 样式

Preventing certain URLs from receiving external link styles

css

css-selectors

external-links