class和id
區別
- id是唯一的而class不是，id一個頁面只可以使用一次；class可以多次引用，如果從頭到尾瀏覽源代碼你會發現只有一個id="header",但是有多個class="entry"。
- 屬性的優先級問題。id的優先級要高于class。
使用技巧
- 子級名字中包含父命名中的部分為開頭。這樣方便在編寫css中明確層次關系。
- class中的子級最好不用id.
- class的命名最好用大小寫合用。
- id具有唯一性，并且最好在外圍使用（id多用于唯一特值得dom元素上例如：頁面上唯一的頭部、正文、和底部這些大的樣式；表單頁面唯一的上傳元素），而class具有可重復性，并且盡量在結構內部使用（多用于指一類dom上，例如：所有的按鈕都有同樣的box-shadow；讓這幾個div的寬度相等；具體的細節，比如具體的一個菜單，一行文字），讓所有的class都成為id的子級或孫級。
常見的選擇器
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
基礎選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用選擇器，匹配頁面任何元素 |
| #id | id選擇器，匹配特定的id元素 |
| .class | 類選擇器，匹配class包含（不是等于）特定類的元素 |
| element | 標簽選擇器 |
組合選擇器
E、F代表基礎選擇器
| 選擇器 | 含義 |
|---|---|
| E，F | 同時選擇兩個基礎選擇器 |
| E F | 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素）元素F |
| E>F | 子元素選擇器，匹配E元素的所有直接子元素 |
| E+F | 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F |
| E~F | 普通相鄰選擇器，匹配E元素之后的同級元素F |
| .class1.class2 | 同時擁有兩個特性的元素例如：<span class="p2">span</span>和<h2 class="p2">h2</h2>選擇器h2下的p2則應是h2.p2；對于<h2 class="p2 active">p2</h2>則是.p2.active |
| element#id | 不常用。例如<div id="ct"></div>寫成div#ct |
屬性選擇器（用的不多）
| 選擇器 | 含義 |
|---|---|
| E[attr=value] | 例如：<input type="text">和<input type="password">則input[]type=password{}
|
偽類選擇器（代表一個元素的另一種狀態）
| 選擇器 | 含義 |
|---|---|
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已經被點擊的鏈接 |
| E:active | 匹配鼠標已經被按下，還沒有釋放的元素 |
| E:hover | 匹配鼠標懸停其上的E元素 |
對于E:nth-child和E:nth-of-type用一個例子來說明
<div>
<h1 class="child">h1</h1>
<h2 class="child">h2</h2>
<div class="ct">
<h1 class="child">ct-h1</h1>
</div>
<h2 class="child">h2</h2>
</div>
E:nth-child匹配父元素的第n個子元素。例如：
.child:first-child{color:red;}則h1和ct-h1變紅。
E:nth-of-type匹配.child對應的父元素中，同種標簽的第一個。
.child:first-of-type{background:blue;}則h1，h2，ct-h1變藍。
偽元素選擇器
E:before和E:after兩個偽元素必須有content表示在E元素之前插入生成的內容。例如：
.wrap:before{
content:'aaa'
}
在元素E內部作為第一個子元素生成一個元素，內容是aaa。
選擇器的優先級
含義
如果多條規則作用于同一元素上，且定義的相同屬性的不同值。比如：
<p id="text">text</p>
css中#text{color:red;}
p{color:blue}。則會涉及到優先級的問題。
優先級
- ！important會覆蓋頁面內任何位置定義的元素樣式，在屬性后面使用
.child:first-child{color:red !important;} - 作為style屬性，寫在元素標簽上的內聯樣式。
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復雜場景
行內樣式-----a
id選擇器------b
類、屬性選擇器和偽類選擇器-------c
標簽選擇器、偽元素-------------------d
原則：先比較a，然后依次比較b,c,d。
| 選擇器 | 優先級 |
|---|---|
| *{} | a=0,b=0,c=0,d=0 |
| li{} | a=0,b=0,c=0,d=1 |
| li:first-line{} | a=0,b=0,c=0,d=2 |
| ul li{} | a=0,b=0,c=0,d=2 |
| ul ol+li{} | a=0,b=0,c=0,d=3 |
| h1+*[rel=up] | a=0,b=0,c=1,d=1 |
| ul ol li.red | a=0,b=0,c=1,d=3 |
| li.red.level | a=0,b=0,c=2,d=1 |
| style="" | a=1 |
| p{} | a=0,b=0,c=0,d=1 |
| div p | a=0,b=0,c=0,d=1 |
| div p.sith | a=0,b=0,c=1,d=2 |
| #sith | a=0,b=1,c=0,d=0 |
| body#darkside.sith p{} | a=0,b=1,c=1,d=2 |
樣式覆蓋
如果選擇器一模一樣，但寫了2遍，則下面的覆蓋上面
div{color:#333;}
div{color:#999;}
愛恨（lvha）原則
a:link, a:visited, a:hover, a:active的順序的原因：
瀏覽器解析都是從上往下解析
a:visited位于a:hover和a:active前面的原因
如果a:visited位于a:hover和a:active的后面，則點擊之后，a:hover和a:active失效。這是因為當點擊之后再用后兩種屬性則這時，鏈接同時具有a:visited,a:hover兩種屬性，由于a:visited屬性會覆蓋前面的屬性，所以另外兩種屬性會失效。
a:link位于a:hover和a:active前面的原因
如果位于兩者的后面，則鏈接還沒有被點開的時候，同時具有這三種屬性，由于瀏覽器由下往上解析，則先解析a:link，則放棄了a:hover,和a:active的重復定義。
a:hover位于a:active前面的原因
當鼠標按下的時候，也是在hover狀態，如果位于后面，則hover就會覆蓋active的顏色。
a:link和a:visited順序呢無所謂，因為不會同時觸發。
div:first-child和div :first-child以及div:first-of-type,div :first-of-type的區別
div:first-child表示其父元素的第一個子元素，并且該標簽為div。
div :first-child表示div的第一個子元素。
div:first-of-type表示其父元素的所有子元素中，標簽為div的第一個子元素（不管該div標簽是不是第一個子元素）。
div :first-of-type表示div作為父元素的同種標簽的第一個。
選擇器的含義
#header{}表示選中id是header的元素
.header{}表示選中class=header的元素
.header .log{}表示選中class=header的元素的后代是class=logo的元素
.header.mobile{}表示選中同時擁有header和mobile類的元素
.header p, .header{}表示選中id=header的元素的后代p和class=header的元素的后代h3
#header .nav>li{}表示選中id=header的元素的后代class=nav下的所有li
#header a:hover{}表示匹配id=header的后代a的鼠標懸停效果
#header .logo~p{}表示匹配id=header的后代中，類名為logo元素之后的同級元素中的所有p標簽
#header input[type="text"]{}表示匹配id=class的后代屬性type=text的input元素。
運行代碼，解析輸出樣式的原因
代碼：
結果：
解析：.item1:first-child中.item1對應的元素為<p class="item1">aa</p>,<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,這三個元素的父元素是<div class="ct">,父元素的第一個標簽是p,所以aa變為紅色。
.item1:first-of-type中.item1的元素為<p class="item1">aa</p>，<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,這三個元素的父元素為<div class="ct">,首次出現的類型為p和第一個h3。所以，aa和bb為藍色。
