*：比對任何元素。
例如: *{margin:0}
E：比對任何E元素。
例如: div{color:red}
E F：比對E的所有後代F元素。
E > F：比對E的所有子F元素。這個選擇器與上一個選擇器的差別是：E F會比對E标簽裡面嵌套的所有F标簽，而E > F隻會比對E标簽裡面嵌套的第一層F标簽。
說明：(Ie6以上版本支援)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css屬性選擇器</title>
<style type="text/css">
*{color:black;}
.cls1 > div {color:red}
.cls2 div{color:green}
</style>
</head>
<body>
<div class="cls1">
<div class="sub">sub div1
<div>aaa</div>
</div>
<div class="sub">sub div2
<div>bbb</div>
<hr />
<div class="cls2">
</body>
</html>
運作代碼
E:first-child：比對第一個E元素。
說明：IE6以上版本支援
<title>E:first-child</title>
.cls1 div:first-child{color:red}
<div >我是紅色的</div>
<div >我是黑色的</div>
E:link，E:visited：分别比對還沒通路過的超連結和已經通路過的超連結。
E:active，E:hover，E:focus：比對各種使用者動作下的E元素。
說明:IE6以上的版本，允許任何元素都可使用:hover等僞類
.cls1:first-child{color:red}
.cls1:focus{border:solid 1px #f00} /*-ie8才開始支援-*/
.cls1:hover{background:#ff9} /*-ie7才開始支援-*/
<input type="text" class="cls1"></input>
E + F：比對與E鄰接的下一個F元素。
說明：(可惡的IE不支援-不管是IE的哪個版本都一樣) 該選擇器還有一個非标準的寫法 E ~ F 效果跟E + F一樣(但是~的這種寫法，IE7,IE8能識别)
.cls1 + .cls2{border:solid 1px #f00}
<input type="text" class="cls2"></input>
E[foo]：比對設定了foo屬性（不管是什麼值）的E元素。
.cls1[email]{border:solid 1px #f00} /*-ie7才開始支援-*/
<input type="text" class="cls1" email="[email protected]"></input>
E[foo="warning"]：比對任何foo屬性為"warning"的E元素。
input[class='cls1']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/
<input type="text" class="cls1" value='cls1'></input>
<input type="text" class="Cls1" value='Cls1'></input>
<input type="text" class="cls2" value='cls2'></input>
E[foo~="warning"]：比對任何foo屬性以空白作為分隔，其中一個值是"warning"的E元素。
input[class~='cls2']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/
<input type="text" class="cls1 cls2" value='cls1 cls2'></input>
E[lang!="en"]：比對任何lang屬性值以"-"作為分隔符，而且第一個精确等于"en"的E元素（也比對lang屬性隻有屬性值en的元素）。
input[class|='cls1']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/
<input type="text" class="cls1-cls2-cls3" value='cls1-cls2-cls3'></input>
<input type="text" class="cls2-cls1" value='cls2-cls1'></input>
E[foo*="abc"]:比對任何有foo屬性值，且屬性值包含"abc"的E元素。
說明:雖然w3c組織未把該選擇器列在标準之中，但是5大浏覽器都支援(除IE6及IE6以下版本)，已經是事實标準
input[class*='cls1']{border:solid 1px #f00} /*--ie7才開始支援(該屬性區分大小寫)--*/
<input type="text" class="cls2cls1" value='cls2cls1'></input>
運作代碼
E.warning：相當于E[class~="warning"]，比對任何使用了warning樣式類的E元素。
E#myid：相當于E[id='myid']，比對任何id為myid的E元素。
E:before和E:after ,這是二個很少用的僞類，用于在E元素前後顯示一些内容(IE8才開始支援)
<title>after,before僞類</title>
*{font-size:12px;line-height:20px;}
.cls1:before{content:"歡迎光臨我的網站";display:block;border-bottom:solid 1px #ccc;line-height:25px;}
.cls1:after{content:"版權所有 2009";display:block;border-top:solid 1px #ccc;line-height:25px;}
<p class="cls1">這是一段文字，示範僞類的用法，隻有在IE8或Safari,Chrome,FireFox,Chrome,Opera上才能看見before,after的内容</p>
以上屬性選擇器可以在http://www.w3.org/TR/CSS2/selector.html查到官方權威資訊
![今日頭條iOS用戶端啟動速度優化 技術調研 實測資料[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)