1、復合選擇器

概述：由兩個或多個基礎選擇器通過不同的方式組合而成的選擇器

1.1 后代元素選擇器

• 語法：

  E F {
   ?  樣式聲明;
  ?
  }

• 描述：【空格】連接一個或多個選擇器

• 作用： 選擇E元素內部包含的所有F元素

1.2 子元素選擇器

• 語法

  E > F {
   ?  樣式聲明; 
  }

• 描述：【大于】號 連接一個或多個選擇器

• 作用： 選擇E元素內部包含的所有直接子元素F（第一嵌套層級）

1.3 相鄰選擇器

• 語法：

  E + F { 
   ?  樣式聲明;
  }

• 描述：【加號】連接一個或多個選擇器

• 作用： E元素之后緊跟著的兄弟元素F

1.4 交集選擇器

• 語法

  E.F { 
   ?  樣式聲明;
  }

• 描述：【無連接符】

• 作用：選擇同時被所有選擇器交集選中的元素

1.5 并集選擇器

• 語法

  E，F { 
   ?  樣式聲明;
  }

• 描述：【逗號】連接一個或多個選擇器

• 作用： 使用逗號分隔的列表來對選擇器進行分組，給列表中每一個選擇器選中的元素設置樣式

1.6 偽類選擇器

超鏈接的四種狀態偽類

• 語法：【冒號：】連接

• 總結：

  • 注意書寫順序 l-v-h-a

  • 實際工作中最常用的是:hover

  • 可以與其它選擇器結合靈活使用

2、CSS三大特性總結

2.1 繼承性

2.1.1 概念

父元素向后代元素傳遞屬性的機制。

2.1.2、表現

后代元素會繼承父元素的屬性。

2.1.3、總結常用可繼承的屬性

font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等

2.1.4、強制繼承

每個CSS屬性都接受這些值inherit，表示強制開啟了繼承”。

2.1.5、作用

恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。

3.2、優先級

3.2.1、概述

瀏覽器通過優先級來判斷哪些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值。 樣式不沖突，優先級沒有意義。當同一個元素有多個沖突聲明的時候，優先級才會有意義。

3.2.2、行內樣式與選擇器的優先級

概述：優先級是基于不同種類選擇器組成的匹配規則。優先級就是分配給指定的 CSS 聲明的一個權重，它由匹配的選擇器中的每一種選擇器類型的數值決定。

總結： 復合選擇器的權值計算方式為:組成其所有單一選擇器的權重累加；同級之前比較個數，不同級別不可跨越。

3.2.3、繼承樣式的優先級

概述：每一個直接作用于元素的 CSS 規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。

* > 繼承屬性

3.2.4、例外規則important

概述：當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其他聲明。

語法：

.box {
 ? ?background-color:red;!important
}

注意：一定要優先考慮使用樣式規則的優先級來解決問題而不是 !important。

3.3、層疊性

概念：當樣式聲明發生沖突時，用戶代理需要確定樣式聲明的最終值，既要考慮樣式的來源又要考慮樣式的特殊聲明又要考慮優先級、以及先后順序 ，這個過程就叫做層疊。

3.3.1、表現

• 開發者樣式>瀏覽器默認樣式

• 行間 > id > 類 > 元素名稱 > * > 繼承樣式

• 當優先級與多個 CSS 聲明中任意一個聲明的優先級相等的時候，CSS 中最后的那個聲明將會被應用到元素上，內部和外部樣式遵循就近原則。

3.3.2、總結

CSS的層疊性是通過繼承和優先級實現

• 樣式聲明不沖突 （同時應用于元素）

• 樣式聲明沖突

  • 同級選擇器，CSS樣式中最后定義的聲明應用于元素（就近原則）

  • 不同級選擇器，由選擇器優先級決定

3、CSS背景

CSS 背景屬性用于定義 HTML 元素的背景，通過背景屬性我們可以定義元素的背景顏 色、背景圖片、背景圖片的平鋪方式和顯示位置等。

3.1 background-color

background-color屬性，設置元素的背景顏色。

常用的值：

• color_name 規定顏色值為顏色名稱的背景顏色（比如red）

• hex_number 規定顏色值為十六進制值的背景顏色（比如 #ff0000）

• rgb_number 規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）

• transparent 默認，背景顏色為透明

注意：背景應用于由內容和內邊距、邊框組成的區域！

3.2 background -image

background-image 屬性，為元素設置背景圖像。

background-image:url(" 圖片資源路徑 ");

常用的值:

• url(‘URL’) 指向圖像的路徑

• none 默認值。不顯示背景圖像

元素的背景默認繪制區域包括內邊距和邊框。

默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。

我們也可以通過 background-repeat 屬性可以改變背景圖像的平鋪方式。

3.3 background -repeat

background-repeat 屬性，設置是否或如何重復背景圖像。

常用的值：

• repeat 默認，背景圖像將在垂直方向和水平方向重復

• repeat-x 背景圖像將在水平方向重復

• repeat-y 背景圖像將在垂直方向重復

• no-repeat 背景圖像將僅顯示一次

3.4、background-position

background-position 屬性，設置背景圖像（由 background-image 定義）的起始位置。 背景圖像如果要重復，將從這一點開始。

語法：

background-position: xpos ?ypos;

一般來說它有兩個值：第一個值表示水平位置，第二個值表示垂直位置。如果僅規定 了一個值，另一個值將是 50%。

取值：

• 關鍵字：top、bottom、left、right 和 center； 指定圖像放置于元素內邊距區域的位置，一個對應水平方向，另一個對應垂直方向 例如：左上角為：left top；

• 長度值 指定圖像相對于元素內邊距區左上角的偏移量。左上角是 0 0，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上；

• 百分比 指定百分數值將同時應用于元素和圖像，左上角是 0% 0%；右下角是 100% 100%。 如果設置為 50% 50%，圖像的中心點將與元素的中心點對齊顯示；

3.5、background簡寫

background是背景復合屬性，在一個聲明中設置所有背景屬性。

語法：

background:bg-color bg-image bg-repeat bg-position;
background: red url(“bgimage.jpg”) no-repeat left top;

當使用簡寫屬性時，屬性值的順序為：

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

如果某個屬性不需要設置，可以省略。

4、vertical-align 屬性詳解

4.1、作用

• 作用1：回顧表格處的應用

• 作用2：定義行內元素的基線相對于該元素所在行的基線的垂直對齊

4.2、常用的值

• baseline 默認。標簽放置在父標簽的基線上

• top 把標簽的頂端與行中最高標簽的頂端對齊

• middle 把此標簽放置在父標簽的中部

• bottom 把標簽的頂端與行中最低的標簽的頂端對齊

4.3、典型應用

• 圖片與圖片垂直方向的對齊（行內塊與行內塊）

• 圖片與文字垂直方向的對齊

5、圖片下間隙問題

圖片下間隙出現的原因： 父元素沒有設置高度，由圖片撐開，就是有間隙

方法：

1、給img的父元素設置高度，高度和圖片的高一致；

2、給img的父元素設置font-size：0；或者 line-height：0；

3、給img標簽轉換為塊級標簽 display：block;

4、為img標簽設置垂直對齊方式 img{vertical-align：不為默認值 baseline}