你可能會注意到，你訪問的一些網站上的外部鏈接旁邊會顯示一個小圖標。這對用戶來說非常有幫助，因為它讓他們知道這個鏈接會將他們帶到站點外部。dr828資訊網——每日最新資訊28at.com

我們可以簡單地使用屬性選擇器來實現外部鏈接的自定義樣式。dr828資訊網——每日最新資訊28at.com

使用屬性選擇器

CSS 允許我們根據 HTML 元素的屬性來設置樣式，方法是將它們放在方括號中。例如，我們可以為具有 hidden 屬性的任何元素設置 display 屬性為 none：dr828資訊網——每日最新資訊28at.com

[hidden] {  display: none;}

我們還可以在屬性等于特定值時設置元素的樣式。對于表單元素，我們可以為特定輸入類型設置樣式，而不必使用類：dr828資訊網——每日最新資訊28at.com

input[type='checkbox'] {  accent-color: deeppink;}

對于我們的外部鏈接，當 href 屬性包含指向外部網站的鏈接時，我們想要應用樣式。我們不知道確切的值是什么（并且在樣式表中添加每個單獨的 URL 是不切實際的！），但我們知道內部鏈接（指向站點上其他帖子的鏈接）將以斜杠開頭，而外部鏈接將以 https:// 開頭。因此，我們可以只為以 http 開頭的鏈接設置樣式，通過在我們的屬性選擇器中插入一個 ^ 字符：dr828資訊網——每日最新資訊28at.com

a[href^='http'] {  /* 外部鏈接的樣式 */}

或者我們可以使用其他運算符來確定不同的樣式條件：dr828資訊網——每日最新資訊28at.com

/* 準確匹配 URL */a[] {}/* URL 中任何位置有 'css' */a[href*='css'] {}/* 以 .info 結尾 */a[href$='.info'] {}/* 類中包含單詞 'link' */a[class~='link'] {}

此外，通過在結束括號前添加 s 或 i，我們可以控制它們是區分大小寫還是不區分大小寫地比較：dr828資訊網——每日最新資訊28at.com

/* 區分大小寫 */a[href*='css-irl' s] {}/* 不區分大小寫 */a[href*='css-irl' i] {}

設置偽元素的樣式

對于我們的外部鏈接，我們將通過設置偽元素的樣式來附加一個圖標。這里我們使用 content 屬性和一個 base64 編碼的 SVG，因為圖標非常簡單。但你也可以使用一個圖像 URL、另一個字符或表情符號。我們可以添加一個小邊距，使其稍微遠離文本。dr828資訊網——每日最新資訊28at.com

a[href^='http']::after {  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E");  margin-left: 0.25em;}

使用 content 屬性和 SVG 的一個問題是我們無法完全控制圖標的大小。它使用 SVG 的固有尺寸。如果我們想將圖標應用于任何外部鏈接，而不考慮字體大小（例如標題），我們可能更適合使用 background-image 屬性。我們可以設置寬度和高度（以 em 為單位，它們相對于字體大小），并使用 background-size 確保我們的 SVG 覆蓋整個區域。dr828資訊網——每日最新資訊28at.com

我們需要將 content 屬性設置為空字符串，否則偽元素不會渲染。我們還需要將 display 屬性設置為 inline-block。dr828資訊網——每日最新資訊28at.com

（注：我使用了自定義屬性來簡化圖像 URL 的表示。）dr828資訊網——每日最新資訊28at.com

a[href^='http']::after {  content: '';  display: inline-block;  width: 1em;  height: 1em;  margin-left: 0.25em;  background-size: 100%;  background-image: url(--var(svgUrl));}

防止孤立圖標

這種方法還有一點可以改進。目前，圖標可能會換行到文本的下一行，留下一個不受歡迎的孤立圖標。dr828資訊網——每日最新資訊28at.com

圖片dr828資訊網——每日最新資訊28at.com

如果我們對偽元素添加 position: absolute，并對錨元素添加一些右側填充，則圖標將不會單獨換行。dr828資訊網——每日最新資訊28at.com

圖片dr828資訊網——每日最新資訊28at.com

a[href^='http'] {  padding-right: 1.25em;}a[href^='http']::after {  position: absolute;  content: '';  display: inline-block;  width: 1em;  height: 1em;  margin-left: 0.25em;  background-size: 100%;  background-image: url(--var(svgUrl));}

不幸的是，這個技巧在最新版本的 Chrome 中不起作用。dr828資訊網——每日最新資訊28at.com

以下是完整代碼：dr828資訊網——每日最新資訊28at.com

*, *::before, *::after {  box-sizing: border-box;}body {  font-family: 'Helvetica', sans-serif;  line-height: 1.6;  margin: 0;  padding: 1em;}.container {  max-width: 380px;  overflow: hidden;  padding: 1rem;  border: 1px solid;  resize: horizontal;}a {  color: inherit;}a[href^='http'] {  padding-right: 1.25em;  background: pink;}a[href^='http']::after {  position: absolute;  content: '';  display: inline-block;  width: 1em;  height: 1em;  margin-left: 0.25em;  background-size: 100%;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E");  transform: translateY(0.25em);}

本文鏈接：http://www.www897cc.com/showinfo-26-35253-0.html利用屬性選擇器對外部鏈接進行樣式設計

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 我們聊聊從頭學服務器組件：在導航間保留狀態

下一篇： 消息隊列批量收發消息，請避開這五個坑！