享受此刻...
class 和 id 的使用場景?
一個#id在HTML中只能出現(xiàn)一次蜻直，控制一個元素穆端；
而一個.class可以多次出現(xiàn)并且可以在多個元素中添加使用（復用）困曙；
CSS選擇器常見的有幾種?
-
基礎選擇器：
-
*（通配符）通用元素選擇器恰矩，匹配頁面任何元素记盒。 -
#idid選擇器，匹配特定id的元素外傅。 -
.class類選擇器纪吮，匹配 class 包含（不是等于）特定類的元素俩檬。 -
element標簽選擇器。例：h1{..}p{..}div{..}
-
-
組合選擇器：
- E,F 多元素選擇器碾盟，用,分隔棚辽，同時匹配元素E或元素F。例：
h1,div {..} - E F 后代選擇器巷疼，用空格分隔晚胡，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F嚼沿。例：
div span{..} - E>F 子元素選擇器估盘，用>分隔，匹配E元素的所有直接子元素骡尽。例：
div>p{..} - E+F 直接相鄰選擇器遣妥，匹配E元素之后的相鄰的同級元素F。例：
h1+p{..} - E~F 普通相鄰選擇器（弟弟選擇器）攀细，匹配E元素之后的同級元素F（無論直接相鄰與否）箫踩。例：
h1~p{..} - .class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，.和 # 本身充當分隔符的元素谭贪。例：
.logo.login{..}/.logo#menu{..} - element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符境钟，.和 #本身充當分隔符的元素。
div#menu{..}（一般直接#menu{..}即可俭识。）
- E,F 多元素選擇器碾盟，用,分隔棚辽，同時匹配元素E或元素F。例：
-
屬性選擇器：
- E[attr] 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div）慨削。例：
input[type]{..} - E[attr=value] 匹配所有屬性為value的元素（div[type=text]匹配id=text的div）。例：
input[type="text"]{..} - E[attr~=value] 匹配所有屬性attr具有多個空格分隔套媚，其中一個值等于value的元素缚态。例：
input[type~=xx]{..} - E[attr ^=value] 匹配屬性attr的值以value開頭的元素。
- E[attr $=value] 匹配屬性attr的值以value結(jié)尾的元素堤瘤。
- E[attr *=value] 匹配屬性attr的值包含value的元素玫芦。
- E[attr] 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div）慨削。例：
偽類選擇器
E:first-child 匹配元素E的父元素的第一個子元素。例：
p:first-child{..}E:last-child 匹配元素E的父元素最后一個子元素本辐。例：
p:last-child{..}E:nth-child(n) 匹配其父元素的第n個子元素桥帆，第一個編號為1。例：
p:nth-child(2){..}E:first-of-type 匹配父元素下使用同種標簽的第一個子元素慎皱，等同于nth-of-type(1)环葵。例：
p:first-of-type{..}E:hover 匹配鼠標懸停智商的e元素。例：
p:hover{..}E:focus 匹配獲得焦點的e元素宝冕。例：
.password:focus {border: 2px solid red;}-
偽元素選擇器
- E::first-line 匹配E元素的第一行张遭。例：
div::first-line{..} - E::first-letter 匹配E元素的第一個字母。例：
.box::first-letter{color:red;} - E::before 在e元素之前插入生成的內(nèi)容地梨。例：
div::before{..} - E::after 在e元素之后插入生成的內(nèi)容菊卷。例：
.box::after{content:'..'}
- E::first-line 匹配E元素的第一行张遭。例：
選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級缔恳？
-
常規(guī)：
- 屬性后加：
”!important：p {color:#ccc!important;} - 內(nèi)聯(lián)樣式：
<p style="color:red;"></p> - id選擇器：
#id - 類選擇器：
.class - 偽類選擇器：
a:link - 屬性選擇器：
h1{..} - 標簽選擇器：
p[XXX] - 通用選擇器：
* - 瀏覽器自定義
- 屬性后加：
復雜場景時：
計算以下四類選擇器的數(shù)量：（多個就+1）
a：內(nèi)聯(lián)樣式
b：id選擇器
c：類、屬性選擇器和偽類選擇器
d：標簽選擇器洁闰、偽元素
先比較a值的大小歉甚，a值大的則優(yōu)先級高;如果a值相等，則再比較b值的大小扑眉，b值大的優(yōu)先級高纸泄；如果b值相等，則比較c值的大小腰素，c值大的優(yōu)先級高聘裁；如果c值相等，則比較d值的大小弓千，d值大的優(yōu)先級高衡便；
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么洋访？
正確順序：a:link镣陕、a:visited、a:hover姻政、a:active
- 原因如下：
- 如果鏈接未被點擊呆抑，正常狀態(tài)只有
a:link起效。 - 鏈接如果被點擊過汁展，那起效的是
a:link鹊碍、a:visited，后者會覆蓋前者效果善镰。 - 如果鼠標懸停并且鏈接已經(jīng)被點擊過妹萨，那起效的是
a:link年枕、a:visited炫欺、a:hover,后者會覆蓋前面所有效果。 - 如果鼠標正點著鏈接不放熏兄，且鏈接之前已經(jīng)被點擊過品洛，那起效的是
a:link、a:visited摩桶、a:hover桥状、a:active，后者會覆蓋之前所有硝清。
以下選擇器分別是什么意思?
<pre>
#header{
}
<!-- 為 id為header的元素 設置樣式 >
```</pre>
<pre>```
.header{
}
<!-- 為 class為header的元素 設置樣式 >
```</pre>
<pre>```
.header .logo{
}
<!-- 為 class為header的所有帶class為logo子元素 設置樣式 >
```</pre>
<pre>```
.header.mobile{
}
<!-- 為 同時帶有class為header和mobile的元素 設置樣式 >
```</pre>
<pre>```
.header p, .header h3{
}
<!-- 為 class為header元素的所有p子元素和所有h3子元素 設置樣式 >
```</pre>
<pre>```
#header .nav>li{
}
<!-- header 元素下所有 class 為 nav 的子孫元素下的子元素 li 設置樣式 >
```</pre>
<pre>```
#header a:hover{
}
<!-- 為 id 為header元素下所有 a 設置鼠標懸浮樣式 >
```</pre>
<pre>```
#header .logo~p{
}
<!-- 為 id 為header元素下帶有class為logo的元素相鄰的p元素（p跟logo兄弟關(guān)系） 設置樣式 >
```</pre>
<pre>```
#header input[type="text"]{
}
<!-- 為 id 為header元素下辅斟，帶有該屬性和值的input 設置樣式 >
```</pre>
</pre>
---
> ## 列出更多偽類選擇器
- **（上面已經(jīng)有部分例子，這里就不展示了..）**
E:first-child 匹配元素E的第一個子元素芦拿。
E:link 匹配所有未被點擊的鏈接士飒。
E:visited 匹配所有已被點擊的鏈接查邢。
E:active 匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素酵幕。
E:hover 匹配鼠標懸停其上的E元素扰藕。
E:enabled 匹配表單中可用的元素。
E:disabled 匹配表單中禁用的元素芳撒。
E:checked 匹配表單中被選中的radio或checkbox元素邓深。
E::selection 匹配用戶當前選中的元素。
E:nth-child(n) 匹配其父元素的第n個子元素笔刹，第一個編號為1芥备。
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1徘熔。
E:nth-of-type(n) 與:nth-child()作用類似门躯，但是僅匹配使用同種標簽的元素。
E:nth-last-of-type(n) 與:nth-last-child() 作用類似酷师，但是僅匹配使用同種標簽的元素讶凉。
E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)山孔。
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素懂讯，等同于:nth-of-type(1)。
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素台颠，等同于:nth-last-of-type(1)褐望。
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)串前。
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素瘫里，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
E:not(selector) 匹配不符合當前選擇器的任何元素荡碾。
---
> ## 以下的作用和區(qū)別 （注意空格的作用）
<pre>```
div:first-child谨读、div:first-of-type、
div :first-child坛吁、div :first-of-type```</pre>
- div:first-child 選擇div父元素下的第一個且是div的子元素
- div :first-child 選擇div元素下的第一個子元素
- div:first-of-type 選擇div的父元素下首個div子元素
- div :first-of-type 選擇div元素下首次出現(xiàn)的某類標簽劳殖，若有多種類型標簽，則選取這些標簽的第一個元素
---
> ##運行如下代碼拨脉，解析下輸出樣式的原因哆姻。
<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>
---
完結(jié)....End！