大部分的信息類網站,比如維基百科,都會對外部鏈接(<a>標簽)指定特定的樣式.作為用戶,一眼就知道該鏈接是指向另一個站點的資源是很好的體驗。許多網站在服務器端做外部鏈接檢查,添加一個`rel=external` 的屬性值,或者對外部鏈接添加一個 ‘external’ 的 class。有時候這是不可能的或不好用的。在網上閑逛之后,我發現以下對外部鏈接很有用的CSS樣式代碼:
a[href^=”http://”]:not([href*=”mysite.com”]),
a[href^=”https://”]:not([href*=”mysite.com”]),
a[href^=”//”]:not([href*=”mysite.com”]), {
/* 外部鏈接的樣式, 如果需要,也可以使用 :before 或 :after 偽類! */
}
請注意,可能在某些瀏覽器上需要 對CSS規則添加瀏覽器特定前綴.
必須先限定鏈接的協議的起始字符,然后限定域名。讓內部鏈接不會匹配,而外部鏈接匹配該正則。
建議收藏或保留下此代碼片段到你的library 中,以防你需要它的時候!
新聞熱點
疑難解答