增强的选择器
1属性选择器
完全匹配选择器
<div id="article">测试完全匹配属性选择器</div>
<style type="text/css">
[id=article]{color:red;}
</style>
包含匹配选择器
<div id="article">测试包含匹配选择器</div>
<div id="subarticle">测试包含匹配选择器</div>
<div id="article1">测试包含匹配选择器</div>
<style type="text/css">
[id*=article]{color:red;}
</style>
首字符匹配选择器
<div id="article">测试首字符匹配选择器</div>
<div id="subarticle">测试首字符匹配选择器</div>
<div id="article1">测试首字符匹配选择器</div>
<style type="text/css">
[id^=article]{color:red;}
</style>
尾字符匹配选择器
<div id="article">测试尾字符匹配选择器</div>
<div id="subarticle">测试尾字符匹配选择器</div>
<div id="article1">测试尾字符匹配选择器</div>
<style type="text/css">
[id$=article]{color:red;}
</style>
2伪类选择器
以前就存在的：a:link,a:visited,a:hover,a:active
p:before{content:"文字"}
元素标签:after{content:"插入的内容"}
li:first-child{color:red;}
li:last-child{color:red;}
//指定第2个li元素
li:nth-child(2){}
//指定倒数第2个li元素
li:nth-last-child(2){}
//指定偶数个li元素
li:nth-child(even){}
//指定奇数个li元素
li:nth-child(odd){}
