伪元素与伪类的一点小总结
伪元素主要有: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。
行文匆忙,很多效果图并没有一一截图出来,有兴趣的可以自己试试。
若有理解错误的,欢迎指出,谢谢!