class 和 id 的使用場景?
- id：id選擇器挠说，使用#name定義（name為id名，可任意取名）坎弯，使用id="name"調用纺涤，其優(yōu)先級高于類選擇器，一個標簽只能有一個id且每個id只能使用一次抠忘，多用于頁面分塊的塊級標簽上撩炊；
- class：類選擇器，使用.name定義（name為類名崎脉，可任意取名）拧咳，使用class="name"調用，一個標簽可以有多個類且同一個類可以用到不同的標簽上囚灼，多用于多個標簽樣式相似或完全相同時骆膝；
CSS選擇器常見的有幾種?
- 基礎選擇器
- 屬性選擇器
- 偽類選擇器
- 組合選擇器
- 偽元素選擇器
選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
選擇器的特殊性分為4個等級灶体，a b c d阅签，從左到右，越左邊的越優(yōu)先, 如果一個選擇器規(guī)則有多個相同類型選擇器蝎抽，則+1政钟。如果是HTML行內樣式，那么特殊性最優(yōu)先a樟结，id選擇器的特殊性是 b類選擇器养交，偽類選擇器、屬性選擇器為 c瓢宦，標簽選擇器碎连、偽元素選擇器為 d
根據組合選擇器按照以下規(guī)則統(tǒng)計各類選擇器的個數：
行內樣式 --> 統(tǒng)計值為a
ID選擇器 --> 統(tǒng)計值為b
類、屬性選擇器驮履、偽類選擇器 --> 統(tǒng)計為c
標簽選擇器鱼辙、偽元素選擇器 --> 統(tǒng)計為d
先比較a值的大小廉嚼，a值大的則優(yōu)先級高;如果a值相等，則再比較b值的大小座每，b值大的優(yōu)先級高前鹅；如果b值相等，則比較c值的大小峭梳，c值大的優(yōu)先級高；如果c值相等蹂喻，則比較d值的大小葱椭，d值大的優(yōu)先級高；
- !important優(yōu)先級最高無視上述規(guī)則口四。當選擇器優(yōu)先級相同時孵运，那么后定義的會覆蓋先定義的。
a:link, a:hover, a:active, a:visited 的順序是怎樣的蔓彩？ 為什么治笨？
注意關鍵的兩點：1.這4個偽類特指度相同。2.一個鏈接可能同時處于多種狀態(tài)赤嚼，即同時屬于多個偽類旷赖。
- 未點擊鏈接前，link偽類長期處于激活狀態(tài)更卒，鼠標懸停（或點擊）時等孵，鏈接同時處于link和hover(或active)狀態(tài)，由于它們特指度相同蹂空，在同時激活的情況下俯萌，后出現的偽類樣式會覆蓋前面的偽類樣式，故link狀態(tài)必須寫在hover(或active)之前上枕「牢酰 再討論hover和active的順序，若把hover放在active后面辨萍，當點擊鏈接一瞬棋恼，實際你在激活active狀態(tài)的同時觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色分瘦。故hover在active之前 其次蘸泻，若把visited放在hover后面，那已訪問過的鏈接一直觸發(fā)著visited偽類嘲玫，會覆蓋hover樣式悦施。 最后去团，其實link抡诞、visited兩個偽類之間順序無所謂穷蛹。（因為它倆不可能同時觸發(fā)，即又未訪問同時又已訪問昼汗。）
當選擇器優(yōu)先級相同時肴熏，那么后定義的會覆蓋先定義的。 - 記這順序有個小招數顷窒，“LoVe蛙吏？ HA!”。
以下選擇器分別是什么意思?
-
#header{ }id選擇器鞋吉，匹配id="header"的元素 -
.header{ }類選擇器鸦做，匹配class="header"的元素 -
.header .logo{ }組合選擇器，匹配class="header"元素的后代元素中class="logo"的元素 -
.header.mobile{ }組合選擇器谓着，匹配class="header mobile"的元素 -
.header p, .header h3{ }多元素選擇器泼诱，匹配class="header"元素的后代p元素和后代h3元素 -
#header .nav>li{ }多元素選擇器，匹配id="header"元素的后代class="nav"元素的直接后代li元素 -
#header a:hover{ }偽類選擇器赊锚，匹配id="header"元素的后代a元素鼠標懸浮在其表面時的樣式 -
#head .logo~p{}組合選擇器,id是header下的所有子元素中class="logo"的所有元素且是同級下的相鄰(無論直接相鄰與否)的p元素 -
#head input[type="text"]{}組合選擇器,id是header下的所有子元素中type="text"的input元素
div:first-child和div:first-of-type的作用和區(qū)別?
div:first-child匹配的是其父元素的第一個子元素治筒；
div:first-of-type匹配的是其父元素下相同類型子元素中的第一個，不一定只有一個子元素舷蒲，而是在父元素下不同標簽的第一個子元素
運行代碼 解析原因
<style> .item1:first-child{ color: red; } .item1:first-of-type{ background: blue; } </style> <div class="ct"> <p class="item1">aa</p> <h3 class="item1">bb</h3> <h3 class="item1">ccc</h3> </div>
- aa
字體紅色原因:.item1:first-child{ color: red; }表示class="item 1"的所有元素中第一個子類元素是紅色,所以aa字體是紅色.
背景藍色原因:.item1:first-of-type{ background: blue; }表示class="item 1"的所有元素中同一標簽(p標簽)的第一個子元素元素背景是藍色 - bb
瀏覽器字體默認樣式
背景藍色原因:.item1:first-of-type{ background: blue; }表示class="item 1"的所有元素中同一標簽(h3標簽)的第一個子元素元素背景是藍色 - ccc
瀏覽器默認樣式
