建站
咨詢
售后
建站咨詢
新聞中心
你可能會(huì)注意到，你訪問的一些網(wǎng)站上的外部鏈接旁邊會(huì)顯示一個(gè)小圖標(biāo)。這對(duì)用戶來說非常有幫助，因?yàn)樗屗麄冎肋@個(gè)鏈接會(huì)將他們帶到站點(diǎn)外部。
富裕ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！
我們可以簡(jiǎn)單地使用屬性選擇器來實(shí)現(xiàn)外部鏈接的自定義樣式。
使用屬性選擇器
CSS 允許我們根據(jù) HTML 元素的屬性來設(shè)置樣式，方法是將它們放在方括號(hào)中。例如，我們可以為具有 hidden 屬性的任何元素設(shè)置 display 屬性為 none：
[hidden] {
display: none;
}我們還可以在屬性等于特定值時(shí)設(shè)置元素的樣式。對(duì)于表單元素，我們可以為特定輸入類型設(shè)置樣式，而不必使用類：
input[type='checkbox'] {
accent-color: deeppink;
}對(duì)于我們的外部鏈接，當(dāng) href 屬性包含指向外部網(wǎng)站的鏈接時(shí)，我們想要應(yīng)用樣式。我們不知道確切的值是什么（并且在樣式表中添加每個(gè)單獨(dú)的 URL 是不切實(shí)際的?。覀冎纼?nèi)部鏈接（指向站點(diǎn)上其他帖子的鏈接）將以斜杠開頭，而外部鏈接將以 https:// 開頭。因此，我們可以只為以 http 開頭的鏈接設(shè)置樣式，通過在我們的屬性選擇器中插入一個(gè) ^ 字符：
a[href^='http'] {
/* 外部鏈接的樣式 */
}或者我們可以使用其他運(yùn)算符來確定不同的樣式條件：
/* 準(zhǔn)確匹配 URL */
a[] {
}
/* URL 中任何位置有 'css' */
a[href*='css'] {
}
/* 以 .info 結(jié)尾 */
a[href$='.info'] {
}
/* 類中包含單詞 'link' */
a[class~='link'] {
}此外，通過在結(jié)束括號(hào)前添加 s 或 i，我們可以控制它們是區(qū)分大小寫還是不區(qū)分大小寫地比較：
/* 區(qū)分大小寫 */
a[href*='css-irl' s] {
}
/* 不區(qū)分大小寫 */
a[href*='css-irl' i] {
}設(shè)置偽元素的樣式
對(duì)于我們的外部鏈接，我們將通過設(shè)置偽元素的樣式來附加一個(gè)圖標(biāo)。這里我們使用 content 屬性和一個(gè) base64 編碼的 SVG，因?yàn)閳D標(biāo)非常簡(jiǎn)單。但你也可以使用一個(gè)圖像 URL、另一個(gè)字符或表情符號(hào)。我們可以添加一個(gè)小邊距，使其稍微遠(yuǎn)離文本。
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 的一個(gè)問題是我們無法完全控制圖標(biāo)的大小。它使用 SVG 的固有尺寸。如果我們想將圖標(biāo)應(yīng)用于任何外部鏈接，而不考慮字體大小（例如標(biāo)題），我們可能更適合使用 background-image 屬性。我們可以設(shè)置寬度和高度（以 em 為單位，它們相對(duì)于字體大?。⑹褂?nbsp;background-size 確保我們的 SVG 覆蓋整個(gè)區(qū)域。
我們需要將 content 屬性設(shè)置為空字符串，否則偽元素不會(huì)渲染。我們還需要將 display 屬性設(shè)置為 inline-block。
（注：我使用了自定義屬性來簡(jiǎn)化圖像 URL 的表示。）
a[href^='http']::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.25em;
background-size: 100%;
background-image: url(--var(svgUrl));
}防止孤立圖標(biāo)
這種方法還有一點(diǎn)可以改進(jìn)。目前，圖標(biāo)可能會(huì)換行到文本的下一行，留下一個(gè)不受歡迎的孤立圖標(biāo)。
圖片
如果我們對(duì)偽元素添加 position: absolute，并對(duì)錨元素添加一些右側(cè)填充，則圖標(biāo)將不會(huì)單獨(dú)換行。
圖片
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));
}不幸的是，這個(gè)技巧在最新版本的 Chrome 中不起作用。
以下是完整代碼：
*, *::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);
}當(dāng)前題目：利用屬性選擇器對(duì)外部鏈接進(jìn)行樣式設(shè)計(jì)
標(biāo)題URL：http://www.dlmjj.cn/article/dhsepoc.html
