例子：

<div> class="footer-wechat"    /*引入一張圖片*/

    <dic></div>     /*用於顯示二維碼照片*/

</div>

.footer-wechat { background-image:url('img/footer-wechat.png')}  /*引入一張圖片*/

.footer-wechat div t{display:none; background-image:url('img/footer-wechat.png')}

                               隱藏，懸停才顯示

目標：

1. 滑鼠懸停外側div，當前div引入圖片替換 .footer-wechat:hover { background-image:url('img/footer-wechat2.png')}

2. 控制當前div的子級div從顯示到不現實  .footer-wechat:hover  div{display:block;}

偽元素   選擇器::偽元素{屬性名：屬性值;}

很像偽類，唯一的區別：兩個::

作用：指定元素的某些部分設定樣式

例子  ::first-line改變段落的第一行文字樣式

5個  mozilla有實驗性不要使用的圖示

::before  ::after

::first-line

::first-letter

::selection

::before  為匹配元素新增第一個子元素（在元素前面插入內容content：包括文字和圖片，還有字型）

::after

一個冒號也能用？！答： css2偽元素用: css2.1用::

 content屬性：

用於為::before ::after新增指定內容

none值 表示不新增任何內容

normal值  類似none

text值  表示普通文字內容跟

url：表示引入一個外部資源

::first-letter  第一個字母/漢字

::first-line

//webstorm提供用於測試的文字內容：  lorem + TAB

用h不行，得用p

::selection

作用：匹配指定元素文字內容中被高亮的部分，html被滑鼠選中的高亮的文字