在圖書(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;}