CSS3中的偽類和偽元素

偽類                 

      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 當做內墻來清除浮動.

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