1. CSS選擇器常見的有幾種?
- 基礎(chǔ)選擇器
1.通配符選擇器*{}
2.id選擇器#id{}
3.類選擇器.class{}
4.標(biāo)簽選擇器p{}
- 組合選擇器(E F為元素)
1. 多元素選擇器E, F (#div1易结， .clear)
2. 后代選擇器E F (#div1 p)
3. 子元素選擇器E>F (#div>h1)
4. 直接相鄰選擇器E+F (匹配E元素之后的相鄰的同級元素)
5. 普通相鄰選擇器（弟弟選擇器）E~F (匹配E元素之后的同級元素（無論是否相鄰）)
屬性選擇器(以某個屬性作為選擇依據(jù)) 如input[type="button"]
偽類選擇器 如：#head:befor #head:after;
2. 選擇器的優(yōu)先級是怎樣的?
1. 在屬性后面使用!important會覆蓋頁面內(nèi)任何位置定義的元素樣式
2. 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義
同級選擇器后聲明的覆蓋先聲明的，聲明設(shè)定的優(yōu)先于通過繼承的
3. class 和 id 的使用場景?
class的使用場景更為廣泛斥季，在html中可以命名相同的class屬性.
id使用規(guī)則比較嚴(yán)苛欺嗤，通常情況下id的屬性名有且只能出現(xiàn)一次参萄，一般在外層布局的時候用到.
4. 使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g
1. 為了更好的匹配我們特定需要匹配的元素，只對匹配的元素生效煎饼，保證代碼樣式在合理的控制內(nèi)不出現(xiàn)不必要的錯誤讹挎。
2. 在團(tuán)隊合作中提供良好的代碼閱讀，能夠更好的合作吆玖，同時避免選擇器命名的混亂筒溃，擁有更好代碼維護(hù)性。
3. 在產(chǎn)品迭代中沾乘，給新的功能提供空間怜奖。
5. 以下選擇器分別是什么意思?
#header{} 選中 id="header"
.header{} 選中 class="header"
.header .logo{} 選中 class="header"元素內(nèi)的class="logo"
.header.mobile{} 選中 class="header"內(nèi)的后代選擇器class="mobile"
.header p, .header h3{} 選中 class="header"內(nèi)的標(biāo)簽p和class="header"內(nèi)部的標(biāo)簽h3
#header .nav>li{} 選中 id="header"的選擇器內(nèi)部的class="nav"內(nèi)的子代選擇器li
#header a:hover{} 選中 id="header"的選擇器內(nèi)a鏈接的偽類選擇器
6. 列出你知道的偽類選擇器
| 選擇器 | 解釋 |
|---|---|
| E:first-child | 匹配父元素的第一個子元素 |
| E:last-child | 匹配父元素的最后一個子元素 |
| E:first-of-type | 匹配同類型中的第一個同級元素E |
| E:last-of-type | 匹配同類型中的最后一個同級元素E |
| E:nth-of-type(n) | 匹配同類型中的第n個同級兄弟元素E |
| E:nth-last-of-type(n) | 匹配同類型中的倒數(shù)第n個同級兄弟元素E |
| E:empty | 匹配沒有任何子元素（包括text節(jié)點）的元素E |
| E:active | 向被激活的元素添加樣式。 |
| E:hover | 當(dāng)鼠標(biāo)懸浮在元素上方時翅阵，向元素添加樣式 |
| E:link | 向未被訪問的鏈接添加樣式 |
| E:visited | 向已被訪問的鏈接添加樣式 |
| E:focus | 向擁有鍵盤輸入焦點的元素添加樣式 |
| E:lang | 向帶有指定 lang 屬性的元素添加樣式 |
| E::selection | 匹配用戶當(dāng)前選中的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E:disabled | 解選擇每個禁用的input元素 |
| E:enabled | 選擇每個啟用的input元素 |
| E:target | 選擇當(dāng)前活動的元素(某個被鏈接的元素) |
| E:root | 匹配文檔中的根元素 |
| E:only-child | 匹配父元素中的僅有的一個子元素(E) |
| E:only-of-type | 匹配父元素中的使用同種標(biāo)簽唯一一個元素(E) |
| E:first-line | 匹配E元素的第一行 |
| E:first-letter | 匹配E元素的第一個字母 |
| E:before | 在E元素之前插入生成的內(nèi)容 |
| E:after | 在E元素之后插入生成的內(nèi)容 |
| E::selection | 匹配用戶當(dāng)前選中的元素 |
| E:not(s) | 匹配不符合當(dāng)前選擇器的任何元素 |
| E:target | 匹配文檔中特定"id"點擊后的效果 |
7. :first-child和:first-of-type的作用和區(qū)別
E:ntn-of-type（n）(選擇第幾個)
E:first-child ：匹配元素E的第一個子元素歪玲，該子元素不是E就不會生效；（只定位在第一個元素）
E:first-of-type : 匹配父元素下使用同種標(biāo)簽的第一個子元素.
(如下圖所示)
0_1478619952221_QQ截圖20161108234459.jpg
要找的是第一個元素一定是p標(biāo)簽的單第一個標(biāo)簽為h3,所以沒有生效
0_1478620026873_QQ截圖20161108234653.jpg
被選中的是第一個p1生效
0_1478620286020_QQ截圖20161108235052.jpg
選中的是第三個p標(biāo)簽
8. 運行如下代碼掷匠，解析下輸出樣式的原因滥崩。
0_1478620821971_QQ截圖20161109000006.jpg
.item1: first-child指的是排在第一位的符合class="item1"的子元素即<p class=“item1”>內(nèi)的 aa變?yōu)榧t色。
.item1: first-of-type指的是符合class="item1"的所有子元素中的第一個讹语，如果有不同標(biāo)簽名則分別作用在第一個上即<p class=“item1”>和<h3 class=“item1”>钙皮。所以背景都為green;<h3 class=“item1”>bb</h3屬于同類標(biāo)簽的第二個所以沒有變。
版權(quán)歸饑人谷--楠柒所有如有轉(zhuǎn)發(fā)請注明出處謝謝
