CSS中的僞類和僞元素回顧

僞類                 

      css2.1, 合法僞類只有 a 標籤有, link  visited  hover  active

            p:hover: 如今人人都有, IE7兼容, 其餘三個仍是隻有 a 有.

            p:foucus: 獲得焦點的元素.

            ----(下面是和表單有關的)-----

            p:checked: 被選中的元素.

            p:disabled: 可用的 

            p:enabled: 不可用的

            ----(下面是和節點關係有關的)------

            p:empty: 沒有任何節點內容的(空格也算內容).

            p: 匹配文檔的根元素, 永遠是 HTML 這個根標籤. 

            以上 IE8 兼容.

 

僞元素

      僞元素是CSS3新增的, 用 :: 來表示僞元素(IE9).

            p::before{

                  content: "哈哈"  --- 必須存在, 表示要添加的文本, 不須要添加文字可寫 ""

            }

            p::after{

                  content: "哈哈"  --- 必須存在, 表示要添加的文本, 不須要添加文字可寫 ""

            }            

            ::before 和 ::after 默認是行內元素, 必要時要轉塊(脫離標準流便可).

            li::before{

                  content:"";

                  float: left;

                  width: 16px;

                  等等...

            }

 

      可應用於清除浮動:

      好比有上下倆 div, 沒有寬高, 內部都浮動了4個有寬高的 p, 試問清除浮動的方法?

      解決方法:

            1. 給 div 高度.

            2. 給 div 加 overflow: hidden

            3. 給下面的 div clear: both, 很差用, margin 失效, 仍是沒有高度. 

            4. 內牆法, 給上面的 div 加一個空盒子並 clear: both.但不符合語義化.

            5. 用::before 或 ::after 當作內牆來清除浮動.

   

 

--------------------------------------------------------------------------------------------------------

            

 

僞對象

     p::first-letter   p 標籤中的首個單詞

      p::first-line     p 標籤中的第一行

     p::selection    p 標籤中的被選中的文本

 

 -------------------------------------------------------------------------------------------------------

 

以上寫出的並不全, 在此拋磚引玉, 有誤導之處還請不吝指點 ^^.