基本選擇器
1.通配符選擇器
*通配符——通配符選擇器是用來選擇所有元素门躯，也可以選擇某個元素下的所有元素
*{margin：0赡茸； padding：0保屯；}
.demo *{border:1px solid #000;}
2.元素選擇器(E)
元素選擇器其實(shí)就是文檔的元素，如html,body,p,div等等
li{border:1px solid #000;}
3.類選擇器（.className）
1、使用類選擇器之前需要在html元素上定義類名
<li class="active important items">2</li>
.important {font-weight: bold; color: yellow;}
2施戴、類選擇器還可以結(jié)合元素選擇器來使用纸俭，如：
p.items {color: red;}
3皇耗、多類選擇器(多類選擇器不被IE6支持)，如：
.important.items {background:#ccc;}
4.id選擇器（#ID）
和上面說的類選擇器很相似揍很，不同的是ID選擇器是一個頁面中唯一的值
<li id="important">2</li>
#important {font-weight: bold; color: yellow;}
5.后代選擇器（Ｅ Ｆ）
前面E為祖先元素郎楼，Ｆ為后代元素，所表達(dá)的意思就是選擇了Ｅ元素的所有后代Ｆ元素窒悔，中間用空格隔開
demo li {color: blue;}
6.子元素選擇器(E>F)
子元素選擇器Ｅ > F呜袁，其中Ｆ僅僅是Ｅ的子元素而已
ul > li {background: green;color: yellow;}
IE6不支持子元素選擇器
7.相鄰兄弟元素選擇器(E + F)
EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素后面简珠，而且相鄰
1阶界、li + li {background: green;color: yellow; border: 1px solid #ccc;}
2、.active + li {background: green;color: yellow; border: 1px solid #ccc;}
IE6不支持
8.通用兄弟選擇器（Ｅ ? Ｆ）
E和F元素是屬于同一父元素之內(nèi)聋庵，并且F元素在Ｅ元素之后膘融，那么E ~ F 選擇器將選擇
所有Ｅ元素后面的Ｆ元素。
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
IE6不支持
9.群組選擇器（selector1,selector2,...,selectorN）
將具有相同樣式的元素分組在一起祭玉，每個選擇器之間使用逗號“氧映，”隔開
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
屬性選擇器
1.E[attr]：只使用屬性名，但沒有確定任何屬性值
.demo a[id] {background: blue; color:yellow;font-weight:bold;}
你也可以使用多屬性進(jìn)行選擇元素脱货，如E[attr1][attr2], 這樣只要是同時具有這兩屬性的元素都將被選中
.demo a[href][title] {background: yellow; color:green;}
IE6不支持這個選擇器
2.E[attr="value"]
E[attr="value"]是指定了屬性值“value”
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
也可以多個屬性并寫岛都，進(jìn)一步縮小選擇范圍
.demo a[href="index.html"][title] {background: yellow; color:green;}
對于E[attr="value"]這種屬性值選擇器有一點(diǎn)需要注意：屬性和屬性值必須完全匹配，特別是對于屬性值是詞列表的形式時 <a href="" class="links item" title="open the website">7</a>
3.E[attr~="value"]
只要屬性值中有一個value相匹配就可以選中該元素
.demo a[title~="website"]{background:orange;color:green;}
總結(jié)：屬性選擇器中有波浪（?）時屬性值有value時就相匹配振峻，沒有波浪（?）時屬性值要完全是value時才匹配臼疫。
IE6瀏覽器不支持
4.E[attr^="value"]
選擇attr屬性值以“value”開頭的所有元素
.demo a[href^="http://"]{background:orange;color:green;}
.demo a[href^="mailto:"]{background:green;color:orange;}
IE6瀏覽器不支持
5.E[attr$="value"]
選擇元素attr屬性，并且他的屬性值是以value結(jié)尾的
常用在網(wǎng)站給pdf,png,doc等不同文件加上不同icon
.demo a[href$="png"]{background:orange;color:green;}
IE6瀏覽器不支持
6.E[attr*="value"]
所選擇的屬性扣孟，其屬性值中有這個"value"值都將被選中
.demo a[title*="site"]{background:black;color:white;}
IE6瀏覽器不支持
7.E[attr^="value"]
選擇器會選擇attr屬性值等于value或以value-開頭的所有元素
.demo a[lang^="zh"]{background:gray;color:yellow;}
IE6瀏覽器不支持
七種屬性選擇器中E[attr="value"]和E[attr* ="value"]是最實(shí)用的多矮，其中E[attr="value"]能幫我們定位
不同類型的元素，特別是表單form元素的操作哈打，比如說input[type="text"],input[type="checkbox"]
等塔逃，而E[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件，比如說你的網(wǎng)站上不同的文件類型
的鏈接需要使用不同的icon圖標(biāo)料仗，用來幫助你的網(wǎng)站提高用戶體驗(yàn)湾盗，就像前面的實(shí)例，可以通過這個屬
性給".doc",".pdf",".png",".ppt"配置不同的icon圖標(biāo)立轧。
偽類選擇器
1.動態(tài)偽類
a:link a:visited a:hover a:active
遵循愛（LoVe）恨（HAte）
:hover用于當(dāng)用戶把鼠標(biāo)移動到元素上面時的效果格粪；
:active用于用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下躏吊，松開鼠標(biāo)左鍵此動作也就完成了）
:focus用于元素成為焦點(diǎn)，這個經(jīng)常用在表單元素上帐萎。
subm:focus{ border:1px solid transparent;box-shadow: 1px 1px 3px #f33; }
2.UI元素狀態(tài)偽類
:enabled :disabled :checked
主要是針對于HTML中的Form元素操作
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
input[type]:checked{width：15px; height:15px;}
IE6-8不支持":checked",":enabled",":disabled"這三種選擇器比伏。
3.CSS3的:nth選擇器
1、:first-child
2疆导、:last-child
3赁项、:nth-child(n) 數(shù)字、even偶數(shù)澈段、odd奇數(shù)
4悠菜、:nth-last-child(n)
5、:only-child
:nth-child(n)败富，其中n是一個簡單的表達(dá)式悔醋，那么"n"取值從“1”開始計(jì)算,不能取負(fù)值
IE6-8和FF3-瀏覽器不支持":nth-child"選擇器。
5兽叮、:nth-of-type
6芬骄、:nth-last-of-type
7、:first-of-type和:last-of-type
8鹦聪、:only-of-type
9账阻、:empty p:empty {display: none;}
IE6-8瀏覽器不支持:only-child選擇器；
IE6-8和FF3.0-瀏覽器不支持:only-of-type選擇器椎麦。
IE6-8瀏覽器不支持:empty選擇器
4.否定選擇器 :not()
input:not([type="submit"]) {border: 1px solid red;}
IE6-8瀏覽器不支持:not()選擇器
5.偽元素
::first-letter
::first-line
::before
::after
::selection 改變網(wǎng)頁被選中文本的樣式
div::before{
content : " ";
display : inline-block;
}
下三角形 ：
width:0;
border : 10px solid transparent
border-top-color : red;
