CSS選擇器主要分為五大類：元素選擇器另假，關系選擇器础淤，屬性選擇器，偽類選擇器和偽元素選擇器鬼吵。平時用的最多的是元素選擇器和關系選擇器扣甲，而本文主要講講用得比較少的屬性選擇器。
首先亮出本文通用的例子：
<!--html-->
<p name="zhangsan">張三（zhangsan）</p>
<p name="liusanjie">劉三姐（liusanjie）</p>
<p name="zhang-ming">張明（zhang-ming）</p>
<p name="lisan">黎三（lisan）</p>
<p name="sandy lisan">李三（sandy lisan）</p>
<p>無名氏</p>
接下來分別舉例講講七大屬性選擇器齿椅。
一琉挖、E[att]，篩選具有att屬性的元素
css代碼：
p[name]{ color: #f00;}
顯示結果：
p[name]
可以看出涣脚，只要具有name屬性的元素都會被篩選出來示辈，而不具有name屬性的“無名氏”顏色沒有變化。
二遣蚀、E[att="val"]矾麻，篩選att屬性值為val的元素
css代碼：
p[name="lisan"]{ color: #f00;}
顯示結果：
p[name="lisan"]
可以看出纱耻，只要name屬性值為“l(fā)isan”的元素都會被篩選出來，而name屬性為“sandy lisan”的元素并不會被篩選射富。
三膝迎、E[att~="val"]，屬性值為用空格分隔的字詞列表胰耗，其中一個等于val的元素（包含只有一個值且該值等于val的情況）
css代碼：
p[name~=lisan]{ color: #f00;}
顯示結果：
p[name~=lisan]
可以看出限次，除了可以篩選出name屬性值為“l(fā)isan”的元素，name屬性值為“sandy lisan”的元素同樣也會被篩選出來柴灯。
四卖漫、E[att^="val"]，篩選att屬性值以val開頭的元素
css代碼：
p[name^=zhang]{ color: #f00;}
顯示結果：
p[name^=zhang]
可以看出赠群，只要是name屬性值以“zhang”開頭的元素都會被篩選出來羊始。
五、E[att$="val"]查描，篩選att屬性值以val結尾的元素
css代碼：
p[name$=san]{ color: #f00;}
顯示結果：
p[name$=san]
可以看出突委，只要是name屬性值以“san”結尾的元素都會被篩選出來。
六冬三、E[att*="val"]匀油，篩選att屬性值中包含val的元素
css代碼：
p[name*=san]{ color: #f00;}
顯示結果：
p[name*=san]
可以看出，只要是name屬性值中包含“san”的元素都會被篩選出來勾笆。
七敌蚜、E[att|="val"]，篩選att屬性值以val開頭并且其后緊跟著 “-” 的元素
css代碼：
p[name|=zhang]{ color: #f00;}
顯示結果：
p[name|=zhang]
可以看出窝爪，只要是name屬性值以“zhang”開頭并且其后緊跟著 “-” 的元素都會被篩選出來弛车，所以只有“張明”顏色變紅，而“張三”顏色不變蒲每。
兼容性：以上七個屬性選擇器均兼容主流瀏覽器纷跛，IE兼容到IE7，可以放心使用邀杏。
