class 和 id 的使用場(chǎng)景?

1. id 指定標(biāo)簽的唯一標(biāo)識(shí)
   例如 <div id = "wrap">
   使用場(chǎng)景：
   ①根據(jù)提供的唯一id號(hào)，快速獲取標(biāo)簽對(duì)象。如：document.getElementById(id)澄耍，或者通過# id{ }控制樣式
   ②用于充當(dāng)label標(biāo)簽for屬性的值：示例：<label for='userid'>用戶名：</label>姻檀，表示單擊此label標(biāo)簽時(shí)袁波，id為userid的標(biāo)簽獲得焦點(diǎn)。
   特性：id值在一個(gè)html內(nèi)唯一
2. class 指定標(biāo)簽的類名
   例如 <div class="wrap">
   使用場(chǎng)景:
   CSS操作吭从，把一些特定樣式放到一個(gè)class類中，需要此樣式的標(biāo)簽恶迈，可以在添加此類涩金。

CSS選擇器常見的有幾種?

image.png

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

選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？

css 優(yōu)先級(jí)一般情況可以用這個(gè)

image.png

面對(duì)復(fù)雜情況 有以下的幾個(gè)概念
若愚老師講的 a b c d 概念相同
選擇器的優(yōu)先權(quán)（取自css權(quán)威指南) 記錄下 P70

1. 內(nèi)聯(lián)樣式表的權(quán)值最高 1000暇仲，加1步做，0，0奈附，0全度；（a )

2. ID 選擇器的權(quán)值為 100，加0斥滤，1将鸵，0，0 ; ( b )

3. Class 類選擇器的權(quán)值為 10佑颇，加0顶掉，0，1挑胸，0 （包括偽類） ( c )

4. HTML 標(biāo)簽選擇器的權(quán)值為 1 痒筒，加0，0，0簿透，1（包括偽元素）( d )

CSS 優(yōu)先級(jí)法則：

A 選擇器都有一個(gè)權(quán)值移袍，權(quán)值越大越優(yōu)先，所以相加起來最大的就最優(yōu)先了萎战；

B 當(dāng)權(quán)值相等時(shí)咐容，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；

C 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式蚂维；

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

E 在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級(jí)最大；

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

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

記錄 在《css權(quán)威指南》一書中P80頁

未點(diǎn)擊鏈接前，link偽類長(zhǎng)期處于激活狀態(tài)涂籽，鼠標(biāo)懸停（或點(diǎn)擊）時(shí)苹祟，a鏈接同時(shí)處于link和hover(或active)狀態(tài)，由于它們特指度相同评雌，
在同時(shí)激活的情況下树枫，后出現(xiàn)的偽類樣式會(huì)覆蓋前面的偽類樣式，故link狀態(tài)必須寫在hover(或active)之前景东。
　　再討論hover和active的順序砂轻，若把hover放在active后面，當(dāng)點(diǎn)擊鏈接一瞬斤吐，實(shí)際你在激活active狀態(tài)的同時(shí)觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色搔涝，所以無法看到active的顏色。故hover在active之前
　　其次和措，若把visited放在hover后面庄呈，那已訪問過的鏈接一直觸發(fā)著visited偽類，會(huì)覆蓋hover樣式派阱。
　　最后诬留，其實(shí)link、visited兩個(gè)偽類之間順序無所謂贫母。（因?yàn)樗鼈z不可能同時(shí)觸發(fā)故响，即又未訪問同時(shí)又已訪問。）

順序： 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"元素的所有后代元素標(biāo)簽為p元素和h3元素的樣式

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

列出你知道的偽類選擇器

image.png

image.png

image.png

div:first-child贮聂、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）

div:first-child 匹配父元素下寨辩，作為第一個(gè)子元素的div元素
div:first-of-type 匹配父元素的子元素中吓懈，第一個(gè)div元素
div :first-child 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)子元素 div :first-of-type 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)類型的子元素

運(yùn)行如下代碼，解析下輸出樣式的原因

image.png

運(yùn)行結(jié)果

image.png

.item1:first-child 匹配class="item1"的所有元素的父元素下的第一個(gè)元素靡狞，在這里父元素是class="ct"的div,這個(gè)div下的第一個(gè)元素是class="item1"的p標(biāo)簽耻警，樣式控制是字體變紅，所以aa會(huì)變紅甸怕，其他不變

.item1:first-of-type 匹配class="item1"的元素的父元素下的所有相同樣式的第一個(gè)元素甘穿，這里class="ct"的div下有p和h3兩種元素，匹配相同樣式的第一種梢杭，所有第一個(gè)p和第一個(gè)h3的樣式改變温兼，背景變藍(lán)色

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

image.png