目錄

第二章 選擇器

• 元素選擇器
• 選擇器分組
• 通配選擇器
• 多類(lèi)選擇器
• 屬性選擇器
• 根據(jù)具體屬性值選擇
• 根據(jù)部分屬性值選擇
• 子串匹配屬性選擇器
• 特定屬性選擇類(lèi)型
• 后代選擇器
• 子元素選擇器
• 相鄰兄弟選擇器
• 偽類(lèi)選擇器
• 偽元素選擇器

第三章 結(jié)構(gòu)和層疊

• 特殊性
• 重要性
• 繼承（繼承父樣式）
• 層疊

第四章 值和單位

第二章 選擇器

• h1 {color:red; background:yellow;}

image

• 元素選擇器

   - p {color: red}

• 選擇器分組
• 假設(shè)希望 h2 元素和段落都有灰色雾叭。為達(dá)到這個(gè)目的，最容易的做法是使用以下聲明：

p, h2{color: greenyellow}

• 通配選擇器
  • 要讓一個(gè)頁(yè)面的所有元素的color值都變成紅色冠摄，如下寫(xiě)法豌蟋；

* {color: red;}

• 多類(lèi)選擇器

.important.warning {background:silver;}
<p class="important warning">
This paragraph is a very important warning.
</p>

• 屬性選擇器
  • 簡(jiǎn)單屬性選擇器
    • 可以只對(duì)有 href 屬性的錨（a 元素）應(yīng)用樣式，看（示例1）：
    • 為了將同時(shí)有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色哈街，可以這樣寫(xiě)看（示例2）：

/*示例1*/
a[href] {color:red;}

/*示例2*/
a[href][title] {color:red;}

• • 根據(jù)具體屬性值選擇
    • 假設(shè)希望將指向 Web 服務(wù)器上某個(gè)指定文檔的超鏈接變成紅色揣苏，可以這樣寫(xiě)：

a[]{color:red;}

• • 根據(jù)部分屬性值選擇
    • 如果需要根據(jù)屬性值中的詞列表的某個(gè)詞進(jìn)行選擇，則需要使用波浪號(hào)（~）假設(shè)您想選擇 class 屬性中包含 important 的元素件舵，可以用下面這個(gè)選擇器做到這一點(diǎn)：

p[class~="important"] {color: red;}

• • 子串匹配屬性選擇器
    • [abc^="def"] 選擇 abc 屬性值以 "def" 開(kāi)頭的所有元素
    • [abc$="def"] 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素
    • [abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素
• • 特定屬性選擇類(lèi)型

*[lang|="en"] {color: red;}

• • • 上面這個(gè)規(guī)則會(huì)選擇 lang 屬性等于 en 或以 en- 開(kāi)頭的所有元素卸察。因此，以下示例標(biāo)記中的前三個(gè)元素將被選中铅祸，而不會(huì)選擇后兩個(gè)元素：

<p lang="en">Hello!</p>  /*匹配*/
<p lang="en-us">Greetings!</p>  /*匹配*/
<p lang="en-au">G'day!</p>  /*匹配*/
<p lang="fr">Bonjour!</p>  /*不匹配*/
<p lang="cy-en">Jrooana!</p>  /*不匹配*/

• 后代選擇器
  • 如果您希望只對(duì) h1 元素中的 em 元素應(yīng)用樣式坑质，可以這樣寫(xiě)：

h1 em {color:red;}

• • 有關(guān)后代選擇器有一個(gè)易被忽視的方面，即兩個(gè)元素之間的層次間隔可以是無(wú)限的临梗。
    例如涡扼，如果寫(xiě)作 ul em，這個(gè)語(yǔ)法就會(huì)選擇從 ul 元素繼承的所有 em 元素盟庞，而不論 em 的嵌套層次多深吃沪。因此，ul em 將會(huì)選擇以下標(biāo)記中的所有 em 元素：

    
    
    圖片.png

• 子元素選擇器

  • 與后代選擇器相比什猖，子元素與后代選擇器相比票彪，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。
  • 這個(gè)規(guī)則會(huì)把第一個(gè) p下面的兩個(gè) em元素變?yōu)榧t色不狮，但是第二個(gè) h1 中的 em不受影響：

p>em {color: red;}

<p>This is <em>very</em><em>very</em> important.</p>
<p>This is <italic><em>very</em><em>very</em></italic> important.</p>

• 相鄰兄弟選擇器
  • 如果需要選擇緊接在另一個(gè)元素后的元素降铸，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）摇零。

h1 + p {margin-top:50px;}

• 偽類(lèi)選擇器
  • :active 向被激活的元素添加樣式（按住鼠標(biāo)左鍵時(shí)）推掸。 1
  • :focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式。 2
  • :hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)驻仅，向元素添加樣式谅畅。 1
  • :link 向未被訪問(wèn)的鏈接添加樣式。 1
  • :visited 向已被訪問(wèn)的鏈接添加樣式噪服。 1
  • :first-child 向元素的第一個(gè)子元素添加樣式铃彰。 2
  • :lang 向帶有指定 lang 屬性的元素添加樣式。 2

• 偽元素選擇器
  • :first-letter 向文本的第一個(gè)字母添加特殊樣式芯咧。 1
  • :first-line 向文本的首行添加特殊樣式牙捉。 1
  • :before 在元素之前添加內(nèi)容。 2
  • :after 在元素之后添加內(nèi)容敬飒。 2

第三章 結(jié)構(gòu)和層疊

• 特殊性
  • 選擇器的特殊性由選擇器本身的組件確定邪铲，特殊性值表述為4個(gè)部分：
    • 對(duì)于選擇器中給定的各個(gè)【ID屬性值】加 0，1无拗，0带到，0
    • 對(duì)于選擇器中給定個(gè)各個(gè)類(lèi)【屬性值】，【屬性選擇】 或 【偽類(lèi)】加 0英染，0揽惹，1被饿，0
    • 選擇器中給定個(gè)各個(gè)【元素】和【偽元素】加 0，0搪搏，0狭握，1
    • 【結(jié)合符】和【通配符】沒(méi)有任何貢獻(xiàn)

• 重要性
  • 有時(shí)，某個(gè)聲明很重要疯溺，那么可以在一個(gè)聲明的最后论颅，在分號(hào)之前加入“!important” , 比行內(nèi)元素權(quán)重還高。

p {border:1px solid red !important; font-size:50px;}

• 層疊
  • !important優(yōu)先級(jí)最高 > 權(quán)重計(jì)算 > 聲明順序
  • 聲明權(quán)重有5級(jí)囱嫩，權(quán)重從大到小依次為：
    • 1恃疯、讀者的重要聲明
    • 2、創(chuàng)作人員的重要聲明
    • 3墨闲、創(chuàng)作人員的普通聲明
    • 4今妄、讀者的正常聲明
    • 5、用戶(hù)代理的聲明