前端开发 \ CSS \ CSS中的第一个:first-letter 最后一个:last-child 第n个:nth-child 伪元素

CSS中的第一个:first-letter 最后一个:last-child 第n个:nth-child 伪元素

总点击335
简介:  下面的伪元素都与元素相对于HTML文档和它内部的HTML元素的位置有关。 :first-letter允许你选定元素的第一个字母。下面是一个例子:


CSS中的第一个:first-letter 最后一个:last-child 第n个:nth-child 伪元素

 


下面的伪元素都与元素相对于HTML文档和它内部的HTML元素的位置有关。


:first-letter允许你选定元素的第一个字母。下面是一个例子:


p:first-letter {font-size:30pt;display:block;float:left;margin:05px5px0;}


:first-line伪元素让你可以选择HTML元素包含文本的首行。下面一个例子为文本的第一行加粗,并让它的字母大写:


p:first-line {font-weight:bold;text-transform:uppercase;}


:nth-child()是一个CSS3伪元素,它会根据指定的选择器选定页面或父元素的第n个元素。在下面的例子中,我们选中页面中的第二段:


p:nth-child(2){background:#e7f0ce;padding:10px;}


我们也可以选定div中的第二段或者列表中的第二项,如下:


div p:nth-child(2){background:#e7f0ce;padding:10px;} ul li:nth-child(2){background:#e7f0ce;padding:10px;}


还可以使用:nth-child(even)和:nth-child(odd)伪类来获取偶数个和奇数个元素。


此外还有:first-child伪元素(CSS2)和:last-child(CSS3)伪元素可以选择一个集合里的第一个和最后一个元素。


收集了这么一则信息之后,我尝试了一下,结果并不如任意。


nth-child(1)这个伪类我,我在ul列表中用了它选定第一个li元素,但遇到的问题是ul列表在火狐和谷歌浏览器下是正常的,但是在ie6浏览器中显示是不正常的,除了第一个li其他的li都集体错到了下边。


然后没办法,我还是用了老办法,给第一个li单独设置了一个class,就ok了。(奇怪的IE6)

意见反馈 常见问题 官方微信 返回顶部