伪类

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 当做内墙来清除浮动.

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