一、class 和 id 的使用場景
- id 屬性只能在每個 HTML 文檔中出現一次，而class無此限制。所以，html中在定義元素獨有的樣式時，用id；當樣式可以復用時，設置class。
二、CSS常見選擇器
-
基礎選擇器
- 通配符選擇器（＊）
- id選擇器（#id）
- 類選擇器（.className）
- 元素選擇器（E）
-
組合選擇器
- E,F：多元素選擇器，用
,分隔，同時匹配元素E或元素F - E F：后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
- E>F：子元素選擇器，用
>分隔，匹配E元素的所有直接子元素 - E+F：直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
- E~F：普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
- .class1.class2：id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
- element.class：id和class選擇器和選擇器連寫的時候中間沒有分隔符，
.和#本身充當分隔符的元素
- E,F：多元素選擇器，用
-
偽類選擇器
- E:first-child：匹配作為長子（第一個子女）的元素E
- E:link：匹配所有未被點擊的鏈接
- E:visited：匹配所有已被點擊的鏈接
- E:active：匹配鼠標已經其上按下、還沒有釋放的E元素
- E:hover：匹配鼠標懸停其上的E元素
- E:focus：匹配獲得當前焦點的E元素
- E:lang(c)：匹配lang屬性等于c的E元素
- E:enabled：匹配表單中可用的元素
- E:disabled：匹配表單中禁用的元素
- E:checked：匹配表單中被選中的radio或checkbox元素
- E::selection：匹配用戶當前選中的元素
- E:root：匹配文檔的根元素，對于HTML文檔，就是HTML元素
- E:nth-child(n)：匹配其父元素的第n個子元素，第一個編號為1
- E:nth-last-child(n)：匹配其父元素的倒數第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[attr]：只使用屬性名，但沒有確定任何屬性值
- E[attr="value"]：指定屬性名，并指定了該屬性的屬性值
- E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”不能不寫
- E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開頭的；
- E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結束的；
- E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含了value；
- E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;
-
偽元素選擇器
- E::first-line：匹配E元素內容的第一行
- E::first-letter ：匹配E元素內容的第一個字母
- E::before：在E元素之前插入生成的內容
- E::after：在E元素之后插入生成的內容
三、選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
選擇器優先級
1.在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
2.作為style屬性寫在元素標簽上的內聯樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義-
復雜場景優先級計算
- 對于內聯樣式，取1，0，0，0
- 對于id選擇器，取0，1，0，0
- 對于class、屬性、偽類，取0，0，1，0
- 對于標簽、偽元素，取0，0，0，1
- 通配符對優先級沒有貢獻
- 優先級相同后者覆蓋前者
這樣可以方便地計算選擇器的優先級，如：
div#id:after /0,1,0,2/
div.class /0,0,1,1/
四、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
按照如下順序，因為樣式層疊，以下選擇器權重一樣，所以依據a鏈接當前的狀態應用不同的規則
1.a:link {color:blue;}
2.a:visited {color:blue;}
3.a:hover {color:red;}
4.a:active {color:yellow;}
五、以下選擇器含義？
/*id為header元素*/
#header{
}
/*class為header元素*/
.header{
}
/*class為header元素后代中所有class為logo的元素*/
.header .logo{
}
/*class中同時含有header和mobile的元素*/
.header.mobile{
}
/*class為header元素后代中所有class為logo的元素*/
/*class為header元素后代中所有h3標簽*/
.header p, .header h3{
}
/*id為header的元素后代所有class為nav元素中的直接子元素li*/
#header .nav>li{
}
/*id為header的元素后代所有a鏈接鼠標懸停其上時*/
#header a:hover{
}
/*id為header的元素后代所有class為logo的元素之后的所有同級p元素*/
#header .logo~p{
}
/*id為header的元素后代所有帶有type="text"屬性值的input標簽*/
#header input[type="text"]{
}
六、列出你知道的偽類選擇器
見問題二
七、div:first-child和div:first-of-type的作用和區別
- div:first-child：如果元素的第一個子元素是div，那么選中這個div
- div:first-of-type：選中元素下出現的第一個div（可能不是第一個子元素）
div:first-child
div:first-of-type
八、運行如下代碼，解析下輸出樣式的原因。
原因：
-
.item1:first-child：如果元素下第一個子元素帶item類，選中這個子元素。所以p.item1為div.ct下符合的子元素。 -
.item1:first-of-type：選擇元素下帶有item1類的同種標簽的第一個，那么第二個h3是不會應用的樣式的。
<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>
運行輸出
