css3的伪类

作者: 你的言语我爱听却不懂 | 来源:发表于2016-04-05 23:17 被阅读31次

1 写法p:before{} 在每个<p>元素之前插入内容.如下图

屏幕快照 2016-04-05 下午10.31.10.png

结果如右边所示

2 写法p:after{} 在每个<p>元素之后插入内容.如下图

屏幕快照 2016-04-05 下午10.35.05.png

结果如右边所示

3 写法p:nth-child(2){} 选择属于其父级的第二个元素.如下图

屏幕快照 2016-04-05 下午10.49.17.png

结果如右边所示

4 写法p:nth-last-child(2){}选择属于其父级的倒数第二个元素.如下图

屏幕快照 2016-04-05 下午10.52.53.png

结果如右边所示

5 写法p:nth-of-type(2){} 选择属于其父级的第二个p元素.如下图

屏幕快照 2016-04-05 下午10.55.20.png

结果如右边所示

6 写法p:nth-of-last-type(2){} 选择属于其父级的倒数第二个p元素.如下图

屏幕快照 2016-04-05 下午11.10.22.png

结果如右边所示

7 写法p:last-child{} 选择倒数第一个元素,是p元素就改变,不是就不变.如下图

屏幕快照 2016-04-05 下午11.14.02.png 屏幕快照 2016-04-05 下午11.15.34.png

结果如右边所示

今天就先到这里了.明天继续.

相关文章

网友评论

    本文标题:css3的伪类

    本文链接:https://www.haomeiwen.com/subject/prgplttx.html