class 和 id 的使用場景?

1. id 指定標簽的唯一標識
   例如 <div id = "wrap">
   使用場景：
   ①根據提供的唯一id號，快速獲取標簽對象。如：document.getElementById(id)，或者通過# id{ }控制樣式
   ②用于充當label標簽for屬性的值：示例：<label for='userid'>用戶名：</label>，表示單擊此label標簽時，id為userid的標簽獲得焦點。
   特性：id值在一個html內唯一
2. class 指定標簽的類名
   例如 <div class="wrap">
   使用場景:
   CSS操作，把一些特定樣式放到一個class類中，需要此樣式的標簽，可以在添加此類。

CSS選擇器常見的有幾種?

image.png

主要有這么幾種常見的
根據W3C文檔的選擇器大全
http://www.w3school.com.cn/cssref/css_selectors.asp

選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？

css 優先級一般情況可以用這個

image.png

面對復雜情況 有以下的幾個概念
若愚老師講的 a b c d 概念相同
選擇器的優先權（取自css權威指南) 記錄下 P70

1. 內聯樣式表的權值最高 1000，加1，0，0，0；（a )

2. ID 選擇器的權值為 100，加0，1，0，0 ; ( b )

3. Class 類選擇器的權值為 10，加0，0，1，0 （包括偽類） ( c )

4. HTML 標簽選擇器的權值為 1 ，加0，0，0，1（包括偽元素）( d )

CSS 優先級法則：

A 選擇器都有一個權值，權值越大越優先，所以相加起來最大的就最優先了；

B 當權值相等時，后出現的樣式表設置要優于先出現的樣式表設置；

C 創作者的規則高于瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高于瀏覽器所設置的樣式；

D 繼承的CSS 樣式不如后來指定的CSS 樣式；

E 在同一組屬性設置中標有“!important”規則的優先級最大；

a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

http://www.cnblogs.com/x_wukong/archive/2013/10/03/3349976.html

記錄 在《css權威指南》一書中P80頁

未點擊鏈接前，link偽類長期處于激活狀態，鼠標懸停（或點擊）時，a鏈接同時處于link和hover(或active)狀態，由于它們特指度相同，
在同時激活的情況下，后出現的偽類樣式會覆蓋前面的偽類樣式，故link狀態必須寫在hover(或active)之前。
　　再討論hover和active的順序，若把hover放在active后面，當點擊鏈接一瞬，實際你在激活active狀態的同時觸發了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前
　　其次，若把visited放在hover后面，那已訪問過的鏈接一直觸發著visited偽類，會覆蓋hover樣式。
　　最后，其實link、visited兩個偽類之間順序無所謂。（因為它倆不可能同時觸發，即又未訪問同時又已訪問。）

順序： a:link , a:visited , a:hover , a: active

以下選擇器分別是什么意思?

// #header{
}
控制id名為header的元素樣式

.header{
}
控制所有類名為header的元素樣式

.header .logo{
}
后代選擇器，控制所有類名為header下的所有的類名為logo的元素樣式
.header.mobile{
}
類選擇器，匹配class="header mobile"的元素
.header p, .header h3{
}
多元素選擇器，控制class="header"元素的所有后代元素標簽為p元素和h3元素的樣式

// #header .nav>li{
}
多元素選擇器，控制id="header"的元素的后代class="nav"元素的直接后代li元素的樣式
// #header a:hover{
}
偽類選擇器，控制id="header"元素的后代a元素鼠標懸浮在其表面時的樣式
// #header .logo~p{
}
控制id="header"元素下的后代class="logo"的元素之后的同級元素p的樣式
// #header input[type="text"]{
}
控制id="header"元素下的后代元素屬性帶有和匹配[type="text"]的input標簽的樣式

列出你知道的偽類選擇器

image.png

image.png

image.png

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）

div:first-child 匹配父元素下，作為第一個子元素的div元素
div:first-of-type 匹配父元素的子元素中，第一個div元素
div :first-child 匹配所有div元素內所有元素中屬于其父元素的首個子元素 div :first-of-type 匹配所有div元素內所有元素中屬于其父元素的首個類型的子元素

運行如下代碼，解析下輸出樣式的原因

image.png

運行結果

image.png

.item1:first-child 匹配class="item1"的所有元素的父元素下的第一個元素，在這里父元素是class="ct"的div,這個div下的第一個元素是class="item1"的p標簽，樣式控制是字體變紅，所以aa會變紅，其他不變

.item1:first-of-type 匹配class="item1"的元素的父元素下的所有相同樣式的第一個元素，這里class="ct"的div下有p和h3兩種元素，匹配相同樣式的第一種，所有第一個p和第一個h3的樣式改變，背景變藍色

記下比較容易忘記的選擇器：

image.png