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
结果如右边所示
今天就先到这里了.明天继续.
网友评论