class 和 id 的使用場(chǎng)景?
id：id選擇器，使用#name定義（name為id名形娇，可任意取名）挠铲，使用id="name"調(diào)用，其優(yōu)先級(jí)高于類選擇器蟹但，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次躯泰，多用于頁(yè)面分塊的塊級(jí)標(biāo)簽上；
class：類選擇器华糖，使用.name定義（name為類名麦向，可任意取名），使用class="name"調(diào)用客叉，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上诵竭，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)；
CSS選擇器常見(jiàn)的有幾種?
- 基礎(chǔ)選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)兼搏？
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
對(duì)于復(fù)雜場(chǎng)景秀撇，我們通過(guò)計(jì)算css不同選擇器的個(gè)數(shù)來(lái)計(jì)算優(yōu)先級(jí)，可以用一個(gè)四位數(shù)來(lái)表示向族，其中行內(nèi)樣式權(quán)重最高，行內(nèi)樣式的個(gè)數(shù)放在千位上棠绘，ID選擇器權(quán)重次之件相，ID選擇器的個(gè)數(shù)放在百位上，類氧苍、屬性選擇器以及偽類選擇器權(quán)重相同夜矗，低于行內(nèi)樣式和ID選擇器，所以让虐，這個(gè)3個(gè)選擇器的個(gè)數(shù)之和放在十位上紊撕，最后，標(biāo)簽選擇器赡突、偽類選擇器權(quán)重最低对扶，個(gè)數(shù)放在個(gè)位上区赵。
for example：
#ct .box p {} 一個(gè)ID選擇器，百位是1浪南，一個(gè)類選擇器笼才，十位是1，一個(gè)標(biāo)簽選擇络凿，個(gè)位是1骡送，所以是0111；
ul ol li.active {} 有一個(gè)偽元素選擇器絮记，十位是1摔踱，3個(gè)標(biāo)簽選擇器，個(gè)位是3怨愤，所以是0013派敷；
0111>0013 所以 前者的樣式優(yōu)先
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么憔四？
a:link
a:visited
a:hover
a:active
四個(gè)都是偽類選擇器膀息，優(yōu)先級(jí)相同；考慮他們會(huì)相互覆蓋了赵，所以要按照這個(gè)順序
以下選擇器分別是什么意思?
#header{ } ID為header的元素潜支；
.header{ } class為header的元素；
.header .logo{ } class為header元素的后代元素中class為logo的元素柿汛；
.header.mobile{ } class既是header又是mobile的元素冗酿；
.header p, .header h3{ } class為header元素的后代中的p元素，和 class為header元素的后代中的h3元素
#header .nav>li{ } ID為header元素的的后代中class為nav的直接li子元素
#header a:hover{ } 鼠標(biāo)懸停的ID為header元素的后代中a元素
#header .logo~p{ } ID為header的元素中的class為logo之后的同級(jí)p元素
#header input[type=“text”]{ } ID為header的元素中 所有屬性type值為text的元素
列出你知道的偽類選擇器
E:first-child 匹配元素E的第一個(gè)子元素
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下络断、還沒(méi)有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當(dāng)前選中的元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素裁替，第一個(gè)編號(hào)為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1
E:nth-of-type(n) 與:nth-child()作用類似貌笨，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似弱判，但是僅匹配使用同種標(biāo)簽的元素
E:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素锥惋，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素昌腰，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素膀跌，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素
div:first-child遭商、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
div:first-child 匹配div父元素中第一個(gè)子元素捅伤；
div :first-child 匹配div元素后代中的第一個(gè)子元素劫流；
div:first-of-type匹配父元素下使用相同標(biāo)簽的第一個(gè)子元素；
div :first-of-type匹配div元素后代中第一個(gè)使用相同標(biāo)簽的子元素；
.item1:first-child 匹配class為item1父元素下的第一個(gè)子元素祠汇，class為item1的p仍秤、h3元素的父元素都是div，div的第一個(gè)子元素是p座哩，所以p字體顏色變紅徒扶；
.item1:first-of-type 匹配父元素下第一個(gè)使用同種標(biāo)簽的子元素，父元素div下有p和h3 兩種標(biāo)簽根穷，所以p和第一個(gè)h3被選中姜骡，背景顏色變藍(lán)。
