在圖書(shū)館借了這本書(shū)，講的非常好，條理清晰，深入淺出，真的有一種和作者交流的感覺(jué)，解決了自己很多困惑，于是決定針對(duì)一些平時(shí)并不常用但是感覺(jué)會(huì)用到的知識(shí)點(diǎn)做一些筆記，加深印象。

一、

　　塊級(jí)元素盒子會(huì)擴(kuò)展到與父元素同寬，如<p><h1><ol><li>。

　　行內(nèi)元素盒子會(huì)“收縮包裹”其內(nèi)容，并且會(huì)盡可能包緊，如<a><img><em><strong>。

二、不常用選擇符

　　1. 特殊上下文選擇符

　　　　（1）子選擇符，標(biāo)簽1 > 標(biāo)簽2，標(biāo)簽2是標(biāo)簽1的子元素，標(biāo)簽1只能是標(biāo)簽2的父元素，不能是其他祖先元素

section > h2 {font-style:italic;}

　　　　（2）緊鄰?fù)x擇符，標(biāo)簽1 + 標(biāo)簽2，標(biāo)簽2必須緊跟標(biāo)簽1

　　　?。?）一般同胞選擇符，標(biāo)簽1 ~ 標(biāo)簽2，與上面相似，但不限制緊跟

　　2. 屬性選擇符

　　　　（1）屬性名選擇符

img[title] {border:2px solid blue;}

　　　?。?）屬性值選擇符

img[title="red flower"] {border:2px solid blue;}

　　3. 偽類

　　　　（1）:focus偽類

input:focus {border:1px solid blue;}

　　　?。?）:target偽類，如果用戶點(diǎn)擊一個(gè)指向頁(yè)面中其他元素的鏈接，則那個(gè)元素就是目標(biāo)（target），可以用:target選中它。

<a href="#more_info">More Information</a>

<h2 id="more_info">This is the information......</h2>

#more_info:target ｛background:#eee;}

　　　　在用戶單擊id為more_info的元素時(shí)，為該元素添加淺灰色背景。（例子：維基百科引證中使用該偽類，否則太多引證不好分辨）

　　　　（3）結(jié)構(gòu)化偽類，:first-child，:last-child，:nth-child應(yīng)用于一組同胞元素中的第一個(gè)、最后一個(gè)或者某個(gè)（些）元素

ol li:first-child {color:blue;}
ol li:last-child {color:red;}
li:nth-child(3)
li:nth-child(odd)
li:nth-child(even)

　　4. 偽元素

　　　?。?）::first-letter，::first-line

p::first-letter {font-size: 300%;}
p::first-line {color: green;}