01.選擇器有哪些
常用的標簽、ID、類選擇器不介紹了，這里講的選擇器兼容性，主流的都可以，IE低版本的不行。
- 屬性選擇器
1、[att]
<input disabled type="text" value="張三">
[disabled]{background-color:#eee;}
2、[att=val]
<input type="button" value="按鈕">
[type=button]{color:blue;}
注：其實ID選擇器也可以寫出這種屬性選擇器的樣子。
#nav{}==[id=nav]{}
3、[att~=val]
如何選中標題和內容呢，就用這個
<h2 class="title sports">標題</h2>
<p class="sports">內容...</p>
[class~=sports]{color:blue;}
注：其實class選擇器也可以寫出這種屬性選擇器的樣子。
.sports{}==[class~=sports]
4、[att|=val]
如何選中lang=en\en-us\en-au的p呢，用這個，這個寫法不常用，一般會在lang屬性中使用的比較多。
<p lang="en">Hello!</p>
<p lang="en-us">Greetings！</p>
<p lang="en-au">G'day!</p>
<p lang="enfr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
[lang|=en]{color:red;}
5、[att^=val] 如何選中href中帶#的頁面內的超鏈接呢，用這個。
<a >W3C</a>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
[href^="#"]{color:red;}
6、[att$=val]以val屬性值為結尾的屬性
<a >word文檔.doc</a>
<a >pdf文件.pdf</a>
[href$=pdf]{color:red;}
7、[att*=val]包含了val屬性值的屬性，比如選中超鏈接中包含http：//lady.163.com的就可以用這個
<a >女星奧斯卡...</a>
<a >范瑋琪產后...</a>
<a >曝李楠有望...</a>
<a >皇馬1億先...</a>
[href*="lady.163.com"]{color:pink;}
- 偽類選擇器
1、a:link;a:visited;a:hover;a:active;設置超鏈接的選擇器，四個配在一起使用，注意一定要這個順序的喲！
<a >網頁首頁</a>
a:link{color:gray;}
a:visited{color:red;}
a:hover{color:green;}
a:active{color:orange;}
2、：enabled 定義可用的狀態\：disabled 定義不可用的狀態\：checked 定義選中的狀態
input:enabled{color:#ccc;}
input:disabled{color:#ddd;}
input:checked{color:#red;}
3、:first-child:last-child以及:nth-child(even)
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
li:first-child{color:red;}//第一個
li:last-child{color:gray;}//最后一個
li:nth-child(even){color:green;}//偶數項
另外:nth-child(even)的變體可以這樣寫:nth-child(3n+1)
4、:only-child選中元素底下只有一個子元素的項
<ul>
<li>一</li>
</ul>
<ul>
<li>一</li>
<li>二</li>
</ul>
：only-child{color:red;}
5、:first-of-type:last-of-type:nth-of-type(even):nth-last-of-type(2n)
<dl>
<dt>作者：</dt>
<dd>Dave Shea</dd>
<dd>Molly E. Holzschlag</dd>
<dt>出版社：</dt>
<dd>人民郵電出版社</dd>
</dl>
dd:first-of-type{color:red;} //Dave Shea
dt:last-of-type{color:gray;} //出版社：
dd:nth-of-type(even){color:green;} //偶數項Molly E. Holzschlag
dt:nth-last-of-type(2n){color:yellow;} //作者：
6、:only-of-type
<p><span>CSS</span>和<span>HTML</span>是頁面制作的基礎</p>
<p><span>CSS</span>主要是用于定義<em>HTML</em>內容在瀏覽器的顯示樣子</p>
span:only-of-type{color:red;} //第二個CSS
7、:empty，可以選中比如下面那個空的p標簽。
<p></p>
<p>段落一</p>
8、:root ，它選中的就是<html></html>這個根標簽。
9、:not():target:lang()
- 偽元素選擇器
1、
::first-letter
::first-line
2、
::before{content:"before";}
::after{content:"after";}
3、::selection應用于被用戶選中的內容
- 組合選擇器
有后代選擇器、子選擇器、和兄弟選擇器。
<div class="main">
<h2>標題一</h2>
<div>
<h2>標題二</h2>
<p>段落一</p>
<p>段落二</p>
</div>
</div>
.main h2{color:red;} //選中標題一二，是后代選擇器
.main>h2{color:red;} //選中標題一，是子選擇器
h2+p{color:red;} //選中段落一，是兄弟選擇器
h2~p{color:red;} //選中段落一二，是兄弟選擇器
02.選擇器優先級
- 行內樣式：a
- ID選擇器的數量：b
- 類、偽類、屬性選擇器的數量：c
- 標簽選擇器和偽元素選擇器的數量：d
a,b,c,d分別給1000,100,10,1的級別值
所以選擇器的最終值value=ax1000+bx100+cx10+dx1
舉個栗子
| 選擇器 | a | b | c | d | value |
| -----|:----:| :----:|:----:|: ----:|
| h1 | 0 | 0 | 0 | 1 | 1 |
| p>em | 0 | 0| 0 | 2| 2 |
| style="" | 1 | 0 | 0 | 0 | 1000 |
| .nav p | 0 | 0 | 1 | 1 | 11 |
| div #nav | 0 | 1 | 0 | 1| 101 |
| a:link | 0 | 0 | 1 | 1 | 11 |
樣式根據選擇器優先級別呈現，優先級別高的會覆蓋優先級別低的，同級別的按照css書寫的順序，先寫的會被后寫的覆蓋。
而樣式里的屬性，不同的屬性會合并，同樣的屬性會根據優先級規則以及書寫規則進行覆蓋。
