屬性選擇器
在HTML中，通過各種各樣的屬性可以給元素增加很多附加的信息。
例如，通過id屬性可以將不同div元素進行區分。
在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴展，新增了3個屬性選擇器，使得屬性選擇器有了通配符的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。
如下表所示：
| 屬性選擇器 | 功能描述 |
| E[att^="val"] | 選擇匹配元素E，且E元素定義了屬性att，其屬性值以val開頭的任何字符串。 |
| E[att$="val"] | 選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結尾的任何字符串，剛好與E[att^="val"]相反。 |
| E[att*="val"] | 選擇匹配元素E，且E元素定義了屬性att，其屬性值任意位置包含了“val”。換句話說，字符串與屬性值中的任意位置相匹配。 |
實例展示：
html代碼：
<a href="xxx.pdf">我鏈接的是PDF文档</a> <a href="#">我類名是icon</a> <a href="#" title="我的title是more">我的title是more</a>
css代碼：
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}結果顯示：
index.html代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
<style>
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"{background:yellow;}]
</style>
</head>
<body>
<a href="##" class="columnsNews">我的背景想變成紅色</a>
<a href="##" class="columnvideo">我的背景想變成紅色</a>
<a href="##" class="columnsAboutUs">我的背景想變成紅色</a>
<a href="1.doc">我的背景想變成綠色</a>
<a href="2.doc">我的背景想變成綠色</a>
<a href="##" title="this is a box">我的背景想變成黃色</a>
<a href="##" title="box1">我的背景想變成黃色</a>
<a href="##" title="there is two boxs">我的背景想變成黃色</a>
</body>
</html>
