class和id
區(qū)別
- id是唯一的而class不是，id一個頁面只可以使用一次跋理；class可以多次引用屎慢，如果從頭到尾瀏覽源代碼你會發(fā)現(xiàn)只有一個id="header",但是有多個class="entry"恩急。
- 屬性的優(yōu)先級問題盛垦。id的優(yōu)先級要高于class。
使用技巧
- 子級名字中包含父命名中的部分為開頭裁良。這樣方便在編寫css中明確層次關(guān)系凿将。
- class中的子級最好不用id.
- class的命名最好用大小寫合用。
- id具有唯一性价脾，并且最好在外圍使用（id多用于唯一特值得dom元素上例如：頁面上唯一的頭部牧抵、正文、和底部這些大的樣式彼棍；表單頁面唯一的上傳元素）灭忠，而class具有可重復(fù)性膳算，并且盡量在結(jié)構(gòu)內(nèi)部使用（多用于指一類dom上，例如：所有的按鈕都有同樣的box-shadow弛作；讓這幾個div的寬度相等涕蜂；具體的細(xì)節(jié)，比如具體的一個菜單映琳，一行文字）机隙，讓所有的class都成為id的子級或?qū)O級。
常見的選擇器
- 基礎(chǔ)選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
基礎(chǔ)選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用選擇器萨西，匹配頁面任何元素 |
| #id | id選擇器有鹿，匹配特定的id元素 |
| .class | 類選擇器，匹配class包含（不是等于）特定類的元素 |
| element | 標(biāo)簽選擇器 |
組合選擇器
E谎脯、F代表基礎(chǔ)選擇器
| 選擇器 | 含義 |
|---|---|
| E葱跋，F(xiàn) | 同時選擇兩個基礎(chǔ)選擇器 |
| 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則應(yīng)是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{}
|
偽類選擇器（代表一個元素的另一種狀態(tài)）
| 選擇器 | 含義 |
|---|---|
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已經(jīng)被點擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)被按下烛愧，還沒有釋放的元素 |
| E:hover | 匹配鼠標(biāo)懸停其上的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對應(yīng)的父元素中怜姿，同種標(biāo)簽的第一個慎冤。
.child:first-of-type{background:blue;}則h1，h2社牲，ct-h1變藍(lán)粪薛。
偽元素選擇器
E:before和E:after兩個偽元素必須有content表示在E元素之前插入生成的內(nèi)容悴了。例如：
.wrap:before{
content:'aaa'
}
在元素E內(nèi)部作為第一個子元素生成一個元素搏恤，內(nèi)容是aaa。
選擇器的優(yōu)先級
含義
如果多條規(guī)則作用于同一元素上湃交，且定義的相同屬性的不同值熟空。比如：
<p id="text">text</p>
css中#text{color:red;}
p{color:blue}。則會涉及到優(yōu)先級的問題搞莺。
優(yōu)先級
- 息罗！important會覆蓋頁面內(nèi)任何位置定義的元素樣式，在屬性后面使用
.child:first-child{color:red !important;} - 作為style屬性才沧，寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式迈喉。
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場景
行內(nèi)樣式-----a
id選擇器------b
類绍刮、屬性選擇器和偽類選擇器-------c
標(biāo)簽選擇器、偽元素-------------------d
原則：先比較a挨摸，然后依次比較b,c,d孩革。
| 選擇器 | 優(yōu)先級 |
|---|---|
| *{} | 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失效熔掺。這是因為當(dāng)點擊之后再用后兩種屬性則這時饱搏，鏈接同時具有a:visited,a:hover兩種屬性，由于a:visited屬性會覆蓋前面的屬性置逻，所以另外兩種屬性會失效推沸。
a:link位于a:hover和a:active前面的原因
如果位于兩者的后面，則鏈接還沒有被點開的時候券坞，同時具有這三種屬性坤学，由于瀏覽器由下往上解析，則先解析a:link报慕，則放棄了a:hover,和a:active的重復(fù)定義深浮。
a:hover位于a:active前面的原因
當(dāng)鼠標(biāo)按下的時候，也是在hover狀態(tài)眠冈，如果位于后面飞苇，則hover就會覆蓋active的顏色。
a:link和a:visited順序呢?zé)o所謂蜗顽，因為不會同時觸發(fā)布卡。
div:first-child和div :first-child以及div:first-of-type,div :first-of-type的區(qū)別
div:first-child表示其父元素的第一個子元素，并且該標(biāo)簽為div雇盖。
div :first-child表示div的第一個子元素忿等。
div:first-of-type表示其父元素的所有子元素中，標(biāo)簽為div的第一個子元素（不管該div標(biāo)簽是不是第一個子元素）崔挖。
div :first-of-type表示div作為父元素的同種標(biāo)簽的第一個贸街。
選擇器的含義
#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下的所有l(wèi)i
#header a:hover{}表示匹配id=header的后代a的鼠標(biāo)懸停效果
#header .logo~p{}表示匹配id=header的后代中，類名為logo元素之后的同級元素中的所有p標(biāo)簽
#header input[type="text"]{}表示匹配id=class的后代屬性type=text的input元素狸相。
運行代碼薛匪，解析輸出樣式的原因
代碼：
結(jié)果：
解析：.item1:first-child中.item1對應(yīng)的元素為<p class="item1">aa</p>,<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,這三個元素的父元素是<div class="ct">,父元素的第一個標(biāo)簽是p,所以aa變?yōu)榧t色。
.item1:first-of-type中.item1的元素為<p class="item1">aa</p>脓鹃，<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,這三個元素的父元素為<div class="ct">,首次出現(xiàn)的類型為p和第一個h3逸尖。所以，aa和bb為藍(lán)色。
