1.class與id的使用場景
- id是對標簽的標識匹颤，頁面內(nèi)唯一厚满，對應(yīng)CSS的選擇符是“#”府瞄；
- class是對一類元素的標識碧磅，多個元素可具有相同的class碘箍，對應(yīng)CSS的選擇符是“.” ;
- id用來識別標識元素遵馆，class用來設(shè)置樣式；
2.CSS常見的選擇器
- 基礎(chǔ)選擇器
- 組合選擇器
- 偽類選擇器
- 屬性選擇器
- 偽元素選擇器
3.選擇器優(yōu)先級排列（由高到低）
- 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
4.復(fù)雜場景如何計算選擇器優(yōu)先級
對于復(fù)雜場景丰榴，例如選擇器組合使用的情況货邓，可以先按照下列四個分級對該元素上應(yīng)用的選擇器進行分類，計算各自類別中的值
- 行內(nèi)樣式 <div style="xxx"></div> ——level a
- ID 選擇器 ——level b
- 類四濒，屬性選擇器和偽類選擇器 ——level c
- 標簽選擇器换况、偽元素 ——level d
例如：
ul ol li.active{} /*a=0 b=0 c=1 d=3 0+0+1+3*/
上述例子中使用了1個類選擇器，3個標簽選擇器
計算出各自level的選擇器值后盗蟆，就可以比較了戈二，按照level由a到d，先比較a喳资，如果a相等觉吭，比較b，以此類推仆邓，數(shù)值大的優(yōu)先級高
5.下列標簽在應(yīng)用時的順序鲜滩，為什么？
a:link, a:hover, a:active, a:visited
首先节值，我們要明確想達到的一個效果：
鏈接本身一個樣式徙硅，鼠標懸停一個樣式，點擊一個樣式搞疗，訪問之后一個樣式嗓蘑，同時訪問后，鼠標再懸停和點擊也會有相應(yīng)的樣式匿乃。
因為選擇器之間有覆蓋原則脐往，同優(yōu)先級的，后定義的會覆蓋先定義的扳埂。
所以业簿，順序如下：
a:link
a:visited
a:hover
a:active
首先，規(guī)定鏈接的常規(guī)樣式阳懂，放在最前面梅尤，其他場景樣式在觸發(fā)時，才能覆蓋得以生效岩调；
其次巷燥，visited要在點擊和懸停之前，這樣后面兩個效果才會生效号枕；
最后缰揪，active是要在hover之后的，否則當(dāng)你點擊時實際上同時也觸發(fā)了懸停的樣式葱淳，定義在后面的hover就會覆蓋前面的active，所以為了讓active生效咕晋，要在hover后面谓传。
6.以下選擇器含義
#header{/*id選擇器，選擇id=“header”的元素*/
}
.header{/*類選擇器定硝，選擇class=“header”的元素*/
}
.header .logo{/*后代選擇器，選擇class=“header”header的所有class=“l(fā)ogo”的后代元素毫目，不只是子元素*/
}
.header.mobile{/*選擇同時具有header和mobile兩個class的元素*/
}
.header p, .header h3{/*選擇class="header*的元素的后代元素中的p元素和h3元素/
}
#header .nav>li{ /*選擇id="header*的元素的后代元素中class=“nav”的元素的所有直接子元素li*/
}
#header a:hover{/*選擇id="header*的后代元素中的a鏈接懸停時的效果/
}
#header .logo~p{/*選擇id="header*的后代元素中蔬啡，class=“l(fā)ogo”的同級p元素，即具有相同父元素/
}
#header input[type="text"]{/*選擇id="header*的后代元素中镀虐，type="text*的文本輸入框/
}
7.偽類選擇器
8.div:first-child箱蟆、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
實踐是檢驗真理的唯一標準刮便，對比了一下兩種用法的代碼效果
- div:first-child
div:first-child{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
- div :first-child（有個空格）
<style>
div :first-child{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
從以上對比我們可以看出顽腾，div:first-child選中的是div的父元素的第一個子元素，所以第一個div下字體顏色都紅了诺核；而div :first-child(有個空格)抄肖，選中的是div后代中的第一個子元素，所以兩個div中只有第一個子元素p的字體顏色變紅了
- div:first-of-type
<style>
div:first-of-type{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<p>test1</p>
<p>test2</p>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
- div :first-of-type（有個空格）
<style>
div :first-of-type{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<p>test1</p>
<p>test2</p>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
從上述對比可以看出窖杀，div:first-of-type選中的是div的父元素的類型中第一次出現(xiàn)的div標簽漓摩，所以第一個div的字體都為紅色；而div :first-of-type（有個空格）入客，選擇對象變?yōu)榱薲iv的后代管毙，在后代中，選中第一次出現(xiàn)的各種類型標簽桌硫，所以兩個div中夭咬，第一次出現(xiàn)的p和h3字體變?yōu)榧t色。
8.解釋下列代碼效果的原因
<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>
首先铆隘，選中class="item1"的父元素的第一個子元素卓舵，使其字體顏色為紅色，所以aa是紅色膀钠；
其次掏湾，選中class="item1"的父元素中，第一次出現(xiàn)的各類型標簽肿嘲，使其背景為藍色融击，所以aa和bb是背景藍色，ccc是第二個出現(xiàn)的h3雳窟，背景不變藍色尊浪。
