1.class 和 id 的使用場景?
id具有唯一性摇锋，一個標(biāo)簽只能有一個id且每個id只能使用一次驾霜，多用于頁面分塊的塊級標(biāo)簽上耕餐；
class用來標(biāo)識同一類元素健霹，一個標(biāo)簽可以有多個類且同一個類可以用到不同的標(biāo)簽上旺上，多用于多個標(biāo)簽樣式相似或完全相同時；
2.CSS選擇器常見的有幾種?
1.基礎(chǔ)選擇器
| 基礎(chǔ)選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器糖埋，匹配頁面任何元素 |
| #id | id選擇器宣吱，匹配特定id的元素 |
| .class | 類選擇器，匹配class包含(不是等于)特定類的元素 |
| element | 標(biāo)簽選擇器 |
2.組合選擇器
| 組合選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器瞳别，用,分隔征候，同時匹配元素E或元素F |
| E F | 后代選擇器，用空格分隔祟敛，匹配E元素所有的后代（不只是子元素疤坝、子元素向下遞歸）元素F |
| E>F | 子元素選擇器，用>分隔馆铁，匹配E元素的所有直接子元素F |
| E+F | 直接相鄰選擇器跑揉，匹配E元素之后的與他相鄰的同級元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否） |
| .class1.class2 | 沒有分隔符埠巨，表示既滿足class1也滿足class2的元素 |
3.屬性選擇器（不常用）
id,class都是屬性历谍。
| 屬性選擇器 | 含義 |
|---|---|
| E[attr] | 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div |
| E[attr = value] | 匹配屬性attr值為value的元素辣垒，div[id=test],匹配id=test的div |
4.偽類選擇器
偽類用于當(dāng)已有元素處于的某個狀態(tài)時扮饶，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化
狀態(tài)偽類
基于元素當(dāng)前狀態(tài)進(jìn)行選擇的乍构。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的甜无，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。常見的狀態(tài)偽類主要包括：
| 狀態(tài)偽類選擇器 | 含義 |
|---|---|
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下哥遮、還沒有釋放的E元素 |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 |
結(jié)構(gòu)性偽類
是css3新增選擇器岂丘，通過文檔結(jié)構(gòu)的互相關(guān)系來匹配元素，能夠減少class和id屬性的定義眠饮，使文檔結(jié)構(gòu)更簡潔奥帘。常見的包括：
| 結(jié)構(gòu)性偽類選擇器 | 含義 |
|---|---|
| :first-child | 選擇某個元素的第一個子元素； |
| :last-child | 選擇某個元素的最后一個子元素仪召； |
| :nth-child(n) | 匹配其父元素的第n個子元素寨蹋，第一個編號為1（odd奇數(shù)松蒜，even偶數(shù)） |
| :nth-last-child() | 選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算已旧； |
| :nth-of-type(n) | 匹配其父元素下使用同種標(biāo)簽的第一個子元素（odd奇數(shù)秸苗，even偶數(shù)） |
| :nth-last-of-type(n) | 選擇指定的元素，從元素的最后一個開始計算运褪； |
| :first-of-type | 選擇一個上級元素下的第一個同類子元素惊楼； |
| :last-of-type | 選擇一個上級元素的最后一個同類子元素； |
| :only-child | 選擇的元素是它的父元素的唯一一個子元素秸讹； |
| :only-of-type | 選擇一個元素是它的上級元素的唯一一個相同類型的子元素檀咙； |
| :empty | 選擇的元素里面沒有任何內(nèi)容。 |
5.偽元素選擇器
偽元素是對元素中的特定內(nèi)容進(jìn)行操作璃诀，用于創(chuàng)建一些不在文檔樹中的元素弧可，并為其添加樣式。
單冒號(:)用于 CSS3 偽類劣欢，雙冒號(::)用于 CSS3 偽元素侣诺，這是 CSS3 規(guī)范中的一部分要求，目的是為了區(qū)分偽類和偽元素氧秘，對于 CSS2 中已經(jīng)有的偽元素年鸳，例如 :before澡屡，單冒號和雙冒號的寫法 ::before 作用是一樣的鳍寂。
| 偽元素選擇器 | 含義 |
|---|---|
| E::first-line | 選擇元素文本的第一行。 |
| E::first-letter | 選擇元素文本的第一個字母娃惯。 |
| E::before | 在元素內(nèi)容的最前面添加新內(nèi)容灭忠。(after以E子元素中的最后一個存在) |
| E::after | 在元素內(nèi)容的最后面添加新內(nèi)容膳算。(after以E子元素中的最后一個存在) |
| E::selection | 匹配用戶當(dāng)前選取的元素 |
:before :after
<div class="box">
<p>這是第一段</p>
</div>
<style>
.box:before{
content: 'start'
}
.box:after{
content: 'end'
}
</style>
- element:before 在element內(nèi)部創(chuàng)建一個行內(nèi)元素，作為element的第一個孩子
- element:after 在element內(nèi)部創(chuàng)建一個行內(nèi)元素弛作，作為element的最后一個個孩子
- 用:before :after 的目的是為了省標(biāo)簽
- 其中content 是必不可少的
偽元素的應(yīng)用
- 清除浮動
如果父元素的所有子元素都是浮動的涕蜂，父元素的高度則無法撐開∮沉眨可以通過對父元素添加after偽類撐開父元素高度机隙，因為after就是其最后一個子元素。
.clear:after {
content: '';
display: block;
clear: both;
}
- 畫一條如下的分割線：
<style>
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割線</p>
</body>
3.替代標(biāo)簽,這樣就可以節(jié)省html標(biāo)簽
4.自定義checkbox樣式
點(diǎn)擊進(jìn)行笑臉切換: 代碼
background-size 設(shè)置背景圖片大小萨西。其中關(guān)鍵詞cover和contain：
cover：縮放背景圖片以完全覆蓋背景區(qū)有鹿，可能背景圖片部分看不見。
contain：縮放背景圖片以完全裝入背景區(qū)谎脯，可能背景區(qū)部分空白葱跋。
6.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？
css選擇器優(yōu)先級從高到低分別是:
- 在屬性值后面加上 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式。（前面后面都覆蓋）
但I(xiàn)E6及以下瀏覽器有個比較顯式的支持問題存在娱俺，!important并不覆蓋掉在同一條樣式的后面的規(guī)則稍味。
div{color:#f00!important;color:#000;}
在上述代碼中，IE6及以下瀏覽器div的文本顏色為#000荠卷，!important并沒有覆蓋后面的規(guī)則模庐；其它瀏覽器下div的文本顏色為#f00。
IE6及以下瀏覽器要使!important生效僵朗，可用以下代碼：
div{color:#f00!important;}
div{color:#000;}
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式 <div style="xxx"></div>
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場景,計算優(yōu)先級
| 選擇器 | 權(quán)重值 |
|---|---|
| 行內(nèi)樣式 | a |
| ID 選擇器 | b |
| 類，屬性選擇器和偽類選擇器 | c |
| 標(biāo)簽選擇器屑彻、偽元素 | d |
注意：a的權(quán)重最高验庙，b、c社牲、d依次遞減粪薛，根據(jù)abcd的排列得出優(yōu)先級順序
!important優(yōu)先級最高，無視上述規(guī)則搏恤。當(dāng)選擇器優(yōu)先級相同時违寿，那么后定義的會覆蓋先定義的。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的熟空？ 為什么藤巢？
/*正確順序*/
a:link {
color: #000;
}
a:visited {
color: #F00;
}
a:hover {
color: #0F0;
}
a:active {
color: #00F;
}
原因：
- 當(dāng)鼠標(biāo)移動到a標(biāo)簽上，此時與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover,這三個選擇器擁有相同的優(yōu)先級息罗，但是被寫在最后的選擇器會覆蓋之前的選擇器掂咒，因此要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)移動到a標(biāo)簽上變換顏色”的效果，需要將a:hover置于 a:link 和 a:visited 之后
- 當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽迈喉，此時與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover和a:active绍刮，這四個選擇器擁有相同的優(yōu)先級，但是被寫在最后的選擇器會覆蓋掉之前的選擇器挨摸，因此要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽時變換顏色”的效果孩革，需要將a:active置于a:link,a:visited,a:hover 之后
5.以下選擇器分別是什么意思?
#header{ /*id選擇器，匹配id="header"的元素*/
}
.header{ /*類選擇器得运，匹配class="header"的元素*/
}
.header .logo{ /*后代選擇器膝蜈，匹配class="header"元素后代中class="logo"的元素*/
}
.header.mobile{ /*既滿足class="header"也滿足class="mobile"的元素*/
}
.header p, .header h3{ /*多元素選擇器,為header類下的p標(biāo)簽與header類下的h3標(biāo)簽添加相同樣式*/
}
#header .nav>li{ /*匹配id="header"元素的后代中class值為nav元素的所有直接子元素li*/
}
#header a:hover{ /*匹配id值為header元素后代中的鼠標(biāo)懸停其上的a元素 */
}
#header .logo~p{ /*在id值為header的元素后代中尋找：class值為logo元素之后的同級p元素*/
}
#header input[type="text"]{/*在id值為header的元素后代中尋找：匹配屬性type值為text的input元素*/
}
6.列出你知道的偽類選擇器
| 偽類選擇器 | 含義 |
|---|---|
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素 |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E:nth-child(n) | 匹配E的父級元素下的第n個子元素熔掺，第一個編號為1 |
| E:nth-of-type(n) | 匹配E的父級元素下所有使用同種標(biāo)簽的第n個元素 |
7.div:first-child彬檀、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child div的父元素的 子元素中第一個元素且標(biāo)簽為div的元素
<body>
<div>123</div>//就是這個元素瞬女，如果該標(biāo)簽不為div,則匹配失敗
<p>123<p>
<div>123</div>
</body>
div:first-of-type div的父元素的 子元素中窍帝，首次出現(xiàn)的div元素
<main>
<p>123<p>
<div>123</div>//就是這個元素
</main>
div :first-child div 下的第一個標(biāo)簽
div :first-of-type div 下的相同標(biāo)簽的第一個
8.運(yù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é)果：
原因：
.item1:first-child 匹配到class="item1"的父級元素下的第一個子元素坤学，即<p class="item1">aa</p>
.item1:first-of-type 匹配到class="item1"的父級元素下所有使用相同標(biāo)簽的第一個元素疯坤。 即使用p標(biāo)簽的第一個元素和使用h3標(biāo)簽的第一個元素。
