属性选择器，指的是通过“元素的属性”来选择元素的一种方式。元素的属性，我们都知道是什么，像下面这句代码中的id、type、value就是input元素的属性。

<input id="btn" type="button" value="按钮" />

实际上，属性选择器在CSS2.1时已经存在了，而CSS3在CSS2.1基础上对其进行了扩展，主要新增了3种，如下表所示。

CSS3属性选择器
选择器 说明
E[attr^=“xxx”] 选择元素E，其中E元素的attr属性是以xxx开头的任何字符
E[attr$=“xxx”] 选择元素E，其中E元素的attr属性是以xxx结尾的任何字符
E[attr*=“xxx”] 选择元素E，其中E元素的attr属性是包含xxx的任何字符

CSS3新增的这3个属性选择器使得选择器具有通配符的功能，有点正则表达式的感觉。

那这些属性选择器都是怎么用的呢？举个例子，我们在使用百度文库下载资料时，经常看到列表前面会显示一个表示文档类型的小图标（如下图所示）。对于这个效果，我们使用CSS3属性选择器就可以轻松实现。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*清除所有元素默认的padding和margin*/
        *{padding:0;margin:0;}
        /*清除列表项符号*/
        ul{list-style-type:none;}
        a
        {
            display:inline-block;
            font-size:12px;
            height:20px;
            line-height:20px;
        }
        /*匹配doc文件*/
        a[href$="doc"]::before
        {
            content:url("img/1.png");
        }
        /*匹配pdf文件*/
        a[href$="pdf"]::before
        {
            content:url("img/2.png");
        }
        /*匹配ppt文件*/
        a[href$="ppt"]::before
        {
            content:url("img/3.png");
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="test.doc" download>下载doc文件</a></li>
        <li><a href="test.pdf" download>下载pdf文件</a></li>
        <li><a href="test.ppt" download>下载ppt文件</a></li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

我们都知道，文件的类型不同，它们的后缀名也是不同的，比如Word文件的后缀名是.doc，而pdf文件的后缀名是.pdf。百度文库列表图标效果的实现原理其实非常简单，只需要使用CSS3属性选择器来匹配a标签中href属性值中最后几个字符（也就是文件后缀名），然后分别添加不同的图标就可以了。

此外，::before是伪元素，常配合content属性使用，实现为元素插入内容。对于伪元素，我们在后续章节会详细介绍。