1.class 和 id 的使用場(chǎng)景?
id是設(shè)置標(biāo)簽的標(biāo)識(shí)。用于定義一個(gè)元素的獨(dú)特的樣式。一個(gè)頁(yè)面中可以有很多個(gè)id，但每個(gè)id只能定義一個(gè)元素。
class是設(shè)置標(biāo)簽的類，用于指定元素屬于何種樣式的類。一個(gè)頁(yè)面中可以有很多個(gè)class，并且每一個(gè)class都可以指定很多個(gè)元素。
2.CSS選擇器常見(jiàn)的有幾種?
2-1.基礎(chǔ)選擇器
- 通用元素選擇器
* - id選擇器
#id - class選擇器
.class - 標(biāo)簽選擇器
element
2-2.組合選擇器
- E,F 多元素選擇器
用于同時(shí)選中E和F - E F 后代選擇器
用于選擇E的所有后代F - E>F 子元素選擇器
用于選擇E的所有直接后代F - E+F 直接相鄰選擇器
用于選擇E之后相鄰的同級(jí)F - E~F 普通相鄰選擇器
用于選擇E之后的同級(jí)F - .class1.class2以及element#id
id和class選擇器和選擇器連寫的時(shí)候不需要分隔符
2-3.屬性選擇器
2-4.偽類選擇器
- E:first-child
匹配元素E的第一個(gè)子元素。 - E:enabled 以及 E:disabled
匹配表單中可用/禁用的元素。 - 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)簽的元素
2-5.偽元素選擇器
- E::before
在E元素之前插入生成的內(nèi)容 - E::after
在E元素之后插入生成的內(nèi)容
3.選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
3-1.選擇器的優(yōu)先級(jí)是怎樣的？
從高到低：
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
3-2.對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
劃分成四類，根據(jù)abcd的數(shù)量來(lái)計(jì)算優(yōu)先級(jí)。優(yōu)先選擇包含a數(shù)量最多的那個(gè)，若a數(shù)量相同，則選擇b數(shù)量最多，以此類推。
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器、偽元素 ==> d
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序是a:link,a:visited, a:hover, a:active。
因?yàn)閍:link是一直生效的，而a:visited是在鏈接被訪問(wèn)后一直生效的，若這兩個(gè)放在后面，則會(huì)覆蓋a:hover, a:active的效果。
5.以下選擇器分別是什么意思?
6.列出你知道的偽類選擇器
- E:first-child
匹配元素E的第一個(gè)子元素。 - E:enabled 以及 E:disabled
匹配表單中可用/禁用的元素。 - 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)簽的元素
7.div:first-child和div:first-of-type的作用和區(qū)別
div:first-child是指父元素下的第一個(gè)子元素，且必須為div。
div:first-of-type是指匹配父元素下div中同種標(biāo)簽的第一個(gè)元素。
8.運(yùn)行如下代碼，解析下輸出樣式的原因。
.item1:first-child{ color: red;}指的是父元素下第一個(gè)item1的字體顏色是紅色。這個(gè)代碼作用于<p class="item1">aa</p>
.item1:first-of-type{ background: blue;}指的是父元素下item1中同種標(biāo)簽的第一個(gè)元素的背景顏色是藍(lán)色。這個(gè)代碼作用于<p class="item1">aa</p>和 <h3 class="item1">bb</h3>
