CSS屬性選擇器制作個性化鏈接樣式

2020-03-24 16:24:38

字體：大中小

來源：轉載

供稿：網友

我們在設計網站的時候，有的時候需要根據頁面元素的屬性來制作不同的樣式，比如，對于不同的鏈接類型，顯示不同的鏈接圖標。CSS的選擇器是個很有用的技術，通過它們，我們可以很容易的實現某些效果。今天我們通過制作個性化鏈接樣式來介紹一下CSS的屬性選擇器。先看一下演示吧：正如上圖中看到的那樣，我們為每種鏈接定義了不同的樣式：當鏈接a的href屬性的值為"mailto"郵件鏈接的時候，在該鏈接后面顯示一個郵件的圖標；當鏈接為word文件時，后面顯示word文檔圖標；當鏈接地址為mp3的時候，顯示音樂播放圖標；當鏈接地址包含"qianduan.net"的時候，就顯示一個首頁圖標…… 其實實現這樣的功能非常容易，我們先來看看CSS的屬性選擇器的語法：
[att|=val]匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素，主要用于lang屬性，比如“en”、“en-us”、“en-gb”css 2.1[att~=val]匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素css 2.1[ns|attr]名字空間下的"attr"屬性的元素，不常用css 3[att^=val]屬性att的值以"val"開頭的元素css 3[att*=val]屬性att的值包含"val"字符串的元素css 3[att$=val]屬性att的值以"val"結尾的元素css 3 需要注意的是，CSS選擇器無論CSS ２.１版本還是CSS 3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下瀏覽器才不支持。好了，讓我們來實現這些樣式吧： 1.鏈接的基礎樣式首先我們準備了一個CSS Sprites的圖片，我們將所有的圖標都整合到這一個a.gif中。 a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;
color:#369;
line-height:24px;
} 這樣，我們就為所有的鏈接定義了默認的樣式了，所有的鏈接右側都會顯示一個紅色的小箭頭圖標。 2.定義個性化樣式現在我們來為各種類型的鏈接定義各自的樣式，其實這個時候我們需要做的僅僅是定義不同的背景圖片位置(background-position)： mailto mailto郵件鏈接是形如href=”mailto:abc@abc.com”的樣式，它們的href屬性的值以mailto開頭，那么我們使用[att^=val]這種格式： a[href^="mailto:"] {
background-position:right -242px;
} word文檔我們一般認為，所有的doc文件鏈接都是href=”abc.doc”這種格式，也就是鏈接地址一.doc結束，那么我們需要使用[att$=val]這種格式。樣式如下： a[href$=".doc"] {
background-position:right -160px
} PDF、excle、mp3等格式的文檔也是通過這種方法來實現的。包含qianduan.net字段的鏈接對于包含某個字符串的鏈接，可以使用[att*=val]這種方式： a[href*="qianduan.net"] {
background-position:right -328px
} 最后讓我們看看完整的樣式吧： a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;color:#369;line-height:24px;
}
a[href^="mailto:"] {background-position:right -242px;}
a[href$=".doc"] {background-position:right -161px}
a[href$=".xls"] {background-position:right -282px}
a[href$=".pdf"] {background-position:right -79px}
a[href$=".mp3"] {background-position:right -204px}
a[href$=".swf"] {background-position:right -120px}
a[href$=".rar"] {background-position:right -38px}
a[href*="qianduan.net"] {background-position:right -328px} 而我們在使用的時候，也不需要添加額外的html' target='_blank'>class： a href="abc.doc" Word文檔 /a 僅此而已。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS制作11種風格不同的特效文字

下一篇：CSS常見樣式