CSS3乾貨16：妙用屬性選擇器製作文件鏈接

有時候，我們需要給網頁添加文件鏈接。用戶點擊後，可以直接下載。

爲了更好的用戶體驗，鏈接的是什麼類型，我們需要用一個圖標去提示用戶。

比如，鏈接到 word，就用 word 圖標；鏈接到 pdf，就用一個 pdf 圖標。

可以用 class 給 word，pdf 等文件寫一個專用的類，把圖標作爲標籤的背景添加。

但是這個方法不是今天討論的內容。

今天我們利用 CSS3 的屬性選擇器，來根據文件類型添加圖標。

效果如下：

HTML代碼

<ul class="downLoadList">
    <li>
        <a href="xx.pdf">
            <div class="linkText">
                這個連接到一個 pdf 文件
            </div>
        </a>
    </li>
    <li>
        <a href="xx.rar">
            <div class="linkText">
                這個連接到一個 rar 文件
            </div>
        </a>
    </li>
    <li>
        <a href="xx.ppt">
            <div class="linkText">
                這個連接到一個 ppt 文件
            </div>
        </a>
    </li>
</ul>

CSS代碼

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
.downLoadList{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.downLoadList li{
    height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 48px;
    font-size: 24px;
}
.downLoadList a{
    display: block;
    text-decoration: none;
    color: #333;
}
.downLoadList a:before{
    float: left;
    margin-right: 10px;
}
.downLoadList a[href$=pdf]:before{
    content: url("images/pdf.png"); 
}
.downLoadList a[href$=rar]:before{
    content: url("images/rar.png");
}
.downLoadList a[href$=ppt]:before{
    content: url("images/ppt.png");
}

知識要點

E[att$="val"] 

att  屬性名，$=“val”  表示以 val 結尾的屬性值。

它的含義就是選擇 att 屬性以  val 結尾的標籤。

正則表達式中表示字符串的結尾也是 $ ，可以聯想記憶~哈哈。當然，開頭就都是 ^ 符號。

a[href$=rar]

就是選擇的 href 屬性以 rar 結尾的 a 標籤。

其他屬性選擇器，可以參考 w3school ：https://www.w3school.com.cn/css/css_syntax_attribute_selector.asp