CSS3中的偽類和偽元素

偽類                 

      css2.1, 合法偽類只有 a 標(biāo)簽有, link  visited  hover  active

            p:hover: 現(xiàn)在人人都有, IE7兼容, 其他三個(gè)還是只有 a 有.

            p:foucus: 得到焦點(diǎn)的元素.

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

            p:checked: 被選中的元素.

            p:disabled: 可用的 

            p:enabled: 不可用的

            ----(下面是和節(jié)點(diǎn)關(guān)系有關(guān)的)------

            p:empty: 沒有任何節(jié)點(diǎn)內(nèi)容的(空格也算內(nèi)容).

            p: 匹配文檔的根元素, 永遠(yuǎn)是 HTML 這個(gè)根標(biāo)簽. 

            以上 IE8 兼容.

偽元素

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

            p::before{

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

            }

            p::after{

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

            }            

            ::before 和 ::after 默認(rèn)是行內(nèi)元素, 必要時(shí)要轉(zhuǎn)塊(脫離標(biāo)準(zhǔn)流即可).

            li::before{

                  content:"";

                  float: left;

                  width: 16px;

                  等等...

            }

      可應(yīng)用于清除浮動(dòng):

      上下倆 div, 沒有寬高, 內(nèi)部都浮動(dòng)了4個(gè) p.

      解決方法:

            1. 給 div 高度.

            2. 給 div 加 overflow: hidden

            3. 給下面的 div clear: both, 不好用, margin 失效, 還是沒有高度. 

            4. 內(nèi)墻法, 給上面的 div 加一個(gè)空盒子并 clear: both.但不符合語義化.

            5. 用::before 或 ::after 當(dāng)做內(nèi)墻來清除浮動(dòng).

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