一.class 和 id 的使用場景?
- class:是定位到頁面上某一類的元素重绷，它們有共同的特征谤民。
- id:一個元素在頁面上是獨一無二的時候使用id堰酿。
二.CSS選擇器常見的有幾種?
- 1.基礎選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用） |
| #id | id選擇器张足，匹配特定id的元素 |
| .class | 類選擇器触创，匹配class包含(不是等于)特定類的元素 |
| element | 標簽選擇器 |
- 2.組合選擇器
| 選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器，用,分隔为牍，同時匹配元素E或元素F |
| E F | 后代選擇器哼绑，用空格分隔，匹配E元素所有的后代（不只是子元素碉咆、子元素向下遞歸）元素F |
| E>F | 子元素選擇器抖韩，用>分隔，匹配E元素的所有直接子元素 |
| E+F | 直接相鄰選擇器疫铜，匹配E元素之后的相鄰的同級元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器）茂浮，匹配E元素之后的同級元素F（無論直接相鄰與否） |
| .class1.class2 | id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素壳咕。匹配既包含class1和class2的元素席揽。 |
- 3.屬性選擇器
| 選擇器 | 含義 |
|---|---|
| E[attr] | 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div |
| E[attr = value] | 匹配屬性attr值為value的元素谓厘，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有屬性attr具有多個空格分隔驹尼、其中一個值等于value的元素 |
| E[attr ^= value] | 匹配屬性attr的值以value開頭的元素 |
| E[attr $= value] | 匹配屬性attr的值以value結尾的元素 |
| E[attr *= value] | 匹配屬性attr的值包含value的元素 |
- 4.偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長子（第一個子女）的元素E |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已被點擊的鏈接 |
| E:active | 匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素 |
| E:hover | 匹配鼠標懸停其上的E元素 |
| E:focus | 匹配獲得當前焦點的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E::selection | 匹配用戶當前選中的元素 |
| E:nth-child(n) | 匹配其父元素的第n個子元素庞呕，第一個編號為1 |
| E:first-of-type | 匹配父元素下使用同種標簽的第一個子元素新翎，等同于:nth-of-type(1) |
- 5.偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
三.選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
- CSS選擇器的優(yōu)先級從高到低分別是：
1.在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義 - 復雜場景計算優(yōu)先級的方式：
先假設：
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類住练，屬性選擇器和偽類選擇器 ==> c
標簽選擇器地啰、偽元素 ==> d
然后對比其大小：若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（鼠標已經(jīng)按下弹谁，還沒有釋放）
因為a:link是未被觸碰狀態(tài)乾巧，在沒有操作是顯示a:link樣式,所以將其放在第一位；a:visited在點擊鏈接訪問過之后预愤，就會一直保持這個狀態(tài)放在第二位沟于，如果將其放在最后將會覆蓋其他樣式。
五.以下選擇器分別是什么意思?
| 選擇器 | 含義 |
|---|---|
| #header{} | id選擇器植康，匹配特定id=“header”的元素 |
| .header{} | 類選擇器旷太，匹配class=“header”的元素 |
| .header .logo{} | 后代選擇器，匹配class=“header”后代元素之中的class=“l(fā)ogo”的元素 |
| .header.mobile{} | 類選擇器销睁，匹配既包含class=“header”又包含class=“mobile”的元素供璧。 |
| .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”的后代中，input元素中违寞，屬性type="text"的元素集合 |
六.列出你知道的偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長子（第一個子女）的元素E |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已被點擊的鏈接 |
| E:active | 匹配鼠標已經(jīng)其上按下贞瞒、還沒有釋放的E元素 |
| E:hover | 匹配鼠標懸停其上的E元素 |
| E:focus | 匹配獲得當前焦點的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E::selection | 匹配用戶當前選中的元素 |
| E:nth-child(n) | 匹配其父元素的第n個子元素，第一個編號為1 |
| E:first-of-type | 匹配父元素下使用同種標簽的第一個子元素趁曼，等同于:nth-of-type(1) |
七.div:first-child军浆、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
- div:first-child:匹配其父元素的第一個子元素的div元素挡闰；
- div:first-of-type:匹配父元素下使用同種標簽的第一個子元素的div元素乒融；
- div :first-child:匹配所有div元素內(nèi)所有元素中屬于父元素的第一個子元素；
- div :first-of-type:匹配所有div元素內(nèi)的所有元素中屬于父元素下第一個標簽的子元素摄悯。
八.運行如下代碼赞季，解析下輸出樣式的原因。
任務7-7-1.0.png
任務7-7-2.png
