防止从接收外部链接样式

我都称呼我的网站上的任何外部链接某些URL的链接后会自动添加一个图标到任何域关闭我的网站使用：防止从接收外部链接样式

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

我在页面上的图像打开一个带有谷歌地图的灯箱，所以上面的代码认为它是一个外部链接，并在图像后添加图标。有没有办法基本上从anotherdomain.com说链接，不适用风格？

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

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

来源

2016-07-22 Tyler Henson

安置自己的HTML。 – dfsq

您的当前选择器是否工作？灯箱是由'data-lightbox'属性引发的吗？将其添加到您的选择器中：'a [href^=“http：//”]：not（[href * =“website.com”]）：not（[data-lightbox]）：在' – LinkinTED

首先，大多数网站的方向是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; 
}

使用方案-更少（或协议更小）的网址：
```
//www.stackoverflow.com 
```

来源

2016-07-22 15:06:49

看起来这是一个伎俩！我确实有https：//的其他选项。 :)但是，我刚刚添加www。到选项，它挑选其他所有东西，但跳过maps.google.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 { 
}

注意：我还没有真正尝试过。

来源

2016-07-22 14:38:26 Daryl

之后没有人实施：匹配（）除Safari之外。 – BoltClock

aarrgh，好的，在其他浏览器中只有部分支持。 – Daryl

好吧，它显示“大多数浏览器支持拼写为前缀：-vendor-any（）伪类”，所以可以走这条路。 [链接]（http://caniuse.com/#feat=css-matches-pseudo） – Daryl

: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-22 15:23:36

防止从接收外部链接样式

回答

相关问题