子選擇器
子元素選擇器只能選擇作為某元素的最近一級子元素。簡單理解就是選親兒子元素。
語法：
元素1>元素2{樣式宣告}
上述語法表示選擇元素1裡面的所有直接後代(子元素)元素2。
例如：
div >p {樣式宣告} /*選擇div裡面所有最近一級p標籤元素*/
元素1和元素2中間用大於號隔開
元素1是父級元素2是子級，最終選擇的是元素2。
元素2必須是親兒子，其孫子，重孫都不歸它管搞你也可以叫他親兒子選擇器。

並集選擇器
並集選擇器可以選擇多組標籤，同時為他們定義相同的樣式。通常用於集體宣告。
並集選擇器是各選擇器通過英文逗號連線而成，任何形式的選擇器都可以作為並集選擇器的一部分。
語法：
元素1,元素2 {樣式宣告}
上述語法表示選擇元素1和元素2。
例如：
u1，div{樣式宣告} /*選擇u1 和div標籤元素 */
元素1和元素2中間用逗號隔開
逗號可以理解為和的意思
並集選擇器通常用於集體宣告

偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或者選擇第一個，第n個元素。
偽類選擇器書寫最大的特點是用冒號表示，比如：hover、:first-child。
因為偽類選擇器很多，比如有連結偽類，結構偽類等。

連結偽類選擇器
a:link 選擇所有未被訪問過的連結
a:visited 選擇所有已被訪問的連結
a:hovee 選擇滑鼠指標位於其上的連結
a:active 選擇活動連結 滑鼠按下未彈起的連結

css的複合選擇器
連結偽類選擇器
一 連結偽類選擇器注意事項
為了確保生效，請按照LVHA的順序宣告：link -: visited-:hover -:active。
記憶法：lv包包hao
因為a連結在瀏覽器中具有預設樣式表所以我們實際工作中都需要給連結單獨指定樣式。

：focus 偽類選擇器
：focus 偽類選擇器用於選取獲得焦點的表單元素。
焦點就是游標，一般情況input類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說。
input :focus {
background-color:yellow;
}

複合選擇器總結

css的元素顯示模式
作用：網頁的標籤非常多，在不同的地方會用到不同型別的標籤。瞭解他們的特點可以更好的佈局網頁。
元素顯示模式就是元素(標籤)以什麼方式顯示比如div自己佔一行，比如一行可以放多個span。

html元素一般分為塊元素和行內元素兩種型別。

塊元素
常見的塊元素有<h1>-<h6>，<p>，<div>，<ul>，<ol>，<li>等，其中<div>標籤是最典型的塊元素。
塊級元素的特點：
比較霸道，自己獨佔一行。
高度，寬度，外邊距以及內邊距離都可以控制。
寬度預設是容器，(父級寬度)的100%。
是一個容器及盒子，裡面可以放行內或塊元素。

注意：
文字類的元素內不能使用塊級元素。
<p>標籤主要用於存放文字，因此<p>裡面不能放塊級元素，特別是不能放<div>。
同理，<h1>-<h6>等都是文字類塊級標籤，裡面也不用放其他塊級元素。

行內元素
常見的行內元素有<a>，<strong>，<b>等，其中<span>是最典型的行內元素。行內元素也叫內聯元素。
行內元素的特點：
相鄰行內元素在一行上，一行可以顯示多個。
高，寬直接設定是無效的。
預設寬度就是它本身內容的寬度。
行內元素只能容納文字或其他行內元素。
注意：
連結裡面不能再放連結
特殊情況連結<a>裡面可以放塊級元素，但是給轉換洗衣機塊級模式最安全。

行內塊元素
行內塊元素中有幾個特殊的標籤——<img/>，<input/>，<td>，它們同時具有塊元素和行內元素的特點。被稱為行內塊元素。
行內塊元素的特點：
和相鄰行內元素(行內塊)在一行上，但是他們之間有空白間隙，一行可以顯示多個(行內元素特點)。
預設寬度就是他們本身內容的寬度(行內元素的特點)。
寬度，行高，外邊距以及內邊距都可以控制(塊級元素的特點)。

元素顯示模式轉換
特殊情況下，我們需要元素模式的轉換，簡單理解，一個模式的元素需要另外一種模式的特性。
比如想要增加連結<a>的觸發範圍。
轉換為塊元素：diaplay:black;
轉換為行內元素：display :inline;
轉換為行內塊：display:inline-block;

文字的行高等於盒子的高度，就可以讓文字在當前盒子內垂直居中。

背景顏色
background-color屬性定義了元素的背景顏色。
background-color：顏色值;
一般情況下元素背景顏色預設值是transparent(透明)，我們也可以手動指定背景顏色為透明色。

背景圖片
background-image屬性描述了元素的背景影象。實際開發常見於logo或者一些裝飾性的小圖片或者是超大的背景圖片，優點是非常便於控制位置。
background-image ：none | url (url)
none 無背景圖(預設的)
url 使用絕對或相對地址指定背景影象

背景平鋪
如果需要在html頁面上對背景圖進行平鋪，可以使用background-repeat屬性。
repeat 背景影象在縱向和橫向上平鋪(預設的)
no-repeat 背景影象不平鋪
repat-x 背景影象在橫向上平鋪
repeat-y 背景影象在縱向平鋪

背景圖片位置
利用background-position屬性可以改變圖片在背景中的位置。
background-position： x y;

引數代表的意思是：x座標和y座標。可以使用方位名詞或者精確單位。
length 百分數 有浮點數字和單位識別符號組成的長度值
position top center bottom left center right

背景圖片位置
引數是方位名詞
如果指定的兩個值都是方位名詞。則兩個值前後順序無關，比如left top和 top left 效果一致。
如果只指定了一個方位名詞，另一個值省略，則第二個值預設居中對齊。

引數是精確單位
如果引數值是精確座標，那麼第一個肯定是x座標，第二個一定是y座標。
如果只指定一個數值，那該數值一定是x座標，另一個預設垂直居中。

引數是混合單位
如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是x座標，第二個值是y座標。

背景影象固定(背景附著)
background-attachment屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動
background-attachment後期可以製作視覺差滾動的效果。
scroll 背景影象是隨物件內容滾動
fixed 背景影象固定

背景複合寫法
為了簡化背景屬性的程式碼，我們可以將這些屬性合併簡寫在同一個屬性background中。從而節約程式碼量，當使用簡寫屬性時，沒有特定的書寫順序。一般習慣約定順序為：
background:背景顏色 背景圖片地址 背景平鋪 背景影象滾動 背景圖片位置;

背景色半透明
background： rgba（0，0，0，0.5）
最後一個引數是alphala透明度，取值範圍在0-1之間
我們習慣吧0.3的0省略掉，寫為background： rgba（0，0，0，.5）
注意 背景半透明是指盒子背景半透明，盒子裡面的內容不受影響

練習