防止從接收外部鏈接樣式

我都稱呼我的網站上的任何外部鏈接某些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

防止從接收外部鏈接樣式

回答

相關問題