伪元素与伪类

  伪元素与伪类的一点小总结

 伪元素主要有：before ，：after，first-line与first-letter。

  伪类相对较多，例如a标签的四种状态：link，visited，hover，active。还有其他的例如focus，lang。而css3中新增的为类更是一大把。大概有：first-of-type，last-of-type，only-of-type，only-child，nth-child（），nth-last-child（），nth-of-type（），nth-last-of-type（），last-child，root，empty，target，enabled，disabled，checked，not（）。

 先说说css3中新增的伪类。

first-of-type与last-of-type，first-of-type指的是搜索指定元素的父元素，在该父元素下找到第一个指定类型的子元素。如：li:first-of-type{background-color:red;}。效果如图所示：

这里指定的元素是li那么找到的也只能是li，即使他的父元素下面的第一个子元素不是li，

但是他的第一个li就行。而last-of-type则是从后面算起。找到指定元素的父元素，

在父元素的基础上找他的最后一个指定类型的子元素。

only-of-type与only-child。前者是指找到指定元素的父元素，在父元素的基础上找到指定类型的子元素。在仅有一个指定元素的时候生效，否则无效。only-child则是没有指定元素。指定元素的父元素有且只有一个

子元素是生效，否则无效。两者的区别在于前者指定了元素，即

在父元素下面有且只有一个指定的元素，不管父元素还有没有其他的元素，只要指定元素只有一个就生效，

而only-child是要父元素仅有一个元素才生效，不管什么元素，只能是

一个元素，否则无效。

 nth-child（n）与nth-last-child（n）。找到元素的父元素下面的第几个子元素。前者是从头到尾算起，

后者是从尾到头算起。当然，这是从1算起的。

 nth-of-type与nth-last-of-type。这两个与上面的两个类似，只是这个指定了类型，即上面的两个只要

是父元素的子元素就

算，而下面两个是要指定的元素才开始计算。其他的子元素不计算在内。

 ：root指定的整个文档的根元素。相当于html。

：empty选择的是没有子节点的元素，元素节点与文本节点都算，空格也算文本节点。

最后说一下这个：not（ele），指定是除了ele元素之外的其他元素。

以上大概的解释了一下css3中新增的伪类。

伪元素，顾名思义，伪装的元素，说他不是个元素，他又具有元素的一些特性，说他是个元素，

在文档中又找不

到。干脆，就叫伪元素。其中，伪元素用得最广的是用来清楚浮动。即在浮动元素的后面给他一

个伪元素after，设置

content：“”，display：block，clear：both。其效果等同于在浮动元素的后面添加一个盒子，

设置盒子的属性

clear：both。

行文匆忙，很多效果图并没有一一截图出来，有兴趣的可以自己试试。

若有理解错误的，欢迎指出，谢谢！