防止特定URL接收外部链接样式

Question

防止特定URL接收外部链接样式

4

我已经通过以下方式为我的网站上的所有外部链接设置了样式，以便在离开我的网站连接到任何域名时自动添加图标：

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

我在页面上有一张图片，点击后会弹出一个带有Google地图的lightbox，因此上述代码认为这是一个外部链接，并在图片后添加了图标。有没有办法基本上说来自anotherdomain.com的链接不适用样式?

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

非常感谢任何帮助！提前致谢！

- user5551675

你当前的选择器能正常工作吗？lightbox 是由 data-lightbox 属性触发的，对你的选择器进行添加：a[href^="http://"]:not([href*="website.com"]):not([data-lightbox]):after。 - GreyRoofPigeon

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joseph Marikle · Answer 1

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

- Daryl · 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 { 
 }

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

- Michael Benjamin · Answer 3

首先，随着大多数网站采用 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
```