1.class 和 id 的使用場景?
類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。
而與類選擇器不同,id選擇器在HTML文檔僅僅使用一次,控制單個元素的樣式。
2.CSS選擇器常見的有幾種?
- 基礎選擇器
- 通用選擇器
- 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
id選擇器
id選擇器是： #id 選擇器，匹配特定id的元素。類選擇器
.class 類選擇器，匹配class包含(不是等于)特定類的元素標簽選擇器
element 標簽選擇器
- 組合選擇器
多元素選擇器
E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F后代選擇器
E F 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F子元素選擇器
E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素直接相鄰選擇器
E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F普通相鄰選擇器
E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
*屬性選擇器
E[attr]：篩選出所有具有屬性名為attr的屬性的元素
E[attr=value]：篩選出所有屬性attr的值為vlaue的元素
E[attr ~= value] 匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
E[attr ^= value] 匹配屬性attr的值以value開頭的元素
E[attr $= value] 匹配屬性attr的值以value結尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素
*偽類選擇器
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:first-child 匹配作為長子（第一個子女）的元素E
E:lang(c) 匹配lang屬性等于c的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當前選中的元素
E:nth-last-child(n) 匹配其父元素的倒數(shù)第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:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個不包含任何子元素的元素，文本節(jié)點也被看作子元素
E:not(selector) 匹配不符合當前選擇器的任何元素
*偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
3.選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
優(yōu)先級:從高到低
- 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
在復雜情況下,可將行內(nèi)樣式設為第一層級A級,將ID 選擇器設為第二層級B級，類選擇器及屬性選擇器和偽類選擇器設為第三級別C級,標簽選擇器和偽元素設為第四層級D級.根據(jù)實際情況先同層級比較大小,再異層級比較大小,綜合衡量后決定優(yōu)先級.此外,同選擇器存在樣式覆蓋現(xiàn)象.
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標懸停狀態(tài)。
a;link表示未被訪問狀態(tài);
a:hover表示鼠標懸停狀態(tài);
a:active表示活動狀態(tài);
a;visited表示已被訪問狀態(tài);
他們的順序應該是"LVHA"的順序.
- 原因在于四個選擇器優(yōu)先級均相同,當鼠標懸停在鏈接上，
a:link,a:visited,a:hover擁有相同的優(yōu)先級，但是被寫在最后的選擇器會覆蓋掉之前的選擇器，因此要想實現(xiàn)“當鼠標懸停鏈接上變換顏色”的效果，需要將a:hover置于 a:link 和 a:visited 之后。 - 當鼠標點擊鏈接，
a:link,a:visited,a:hover和a:active擁有相同的優(yōu)先級，但是被寫在最后的選擇器會覆蓋掉之前的選擇器，因此要想實現(xiàn)“當鼠標點擊鏈接時變換顏色”的效果，需要將a:active置于a:link,a:visited,a:hover 之后。
5.以下選擇器分別是什么意思?
6列出你知道的偽類選擇器
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經(jīng)其上按下、還沒有釋放的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) 匹配其父元素的倒數(shù)第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:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個不包含任何子元素的元素，文本節(jié)點也被看作子元素
E:not(selector) 匹配不符合當前選擇器的任何元素
7.div:first-child和div:first-of-type的作用和區(qū)別
根據(jù)測試的兩個例子可以看出,
div:first-child:父元素的第一個子元素且必須符合指定類型(div)才會有效果,而div:first-of-type:父元素中的第一個div元素即可以產(chǎn)生效果.可見兩者的差別在于
:first-child匹配的是父元素中的第一個子元素且必須滿足相應條件，而:first-of-type匹配的是父元素中同類的第一個擁有相同標簽的子元素。
8.運行如下代碼，解析下輸出樣式的原因
9.css比較合適的書寫規(guī)范
- 語法不區(qū)分大小寫，但建議統(tǒng)一使用小寫
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞，分隔符建議使用-
- 有可能就使用縮寫
- 屬性值是0的省略單位
- 塊內(nèi)容縮進
- 屬性名冒號后面添加一個空格
