PHP生活

记录生活里的一分一秒

PHP生活

记录生活里的一分一秒

CSS伪类选择器:nth-child

  我们都知道CSS3提供了强大的伪类(pseudo-class)选择器,让开发者能选择某一对象中符合特定条件的元素进行渲染。虽然这些伪类在刚接触的时候大家会觉得非常混乱,但当掌握了以后能大大提高你的代码效率,并且节省代码量。所以希望大家能够认真阅读。

  下面给大家介绍下nth-child的用法:

  first-child 定义第一个li样式

  .test1 li:nth-child(1){background: red}

  first-child 定义第一个li样式

  nth-last-child(n): 选择某个子元素,从最后一个数起

  nth-of-type(n): 选择某个某种类型的子元素

  nth-last-of-type(n): 选择某个某种类型的子元素,从最后一个符合条件的元素数起

  first-child: 选择第一个子元素(这个伪类在CSS2里就有)

  last-child: 选择最后一个子元素

  .test2 li:first-child{background: red}

  nth-child(2n) 定义偶数li的样式

  nth-child(2n+1) 选择奇数行

  nth-child(odd)  同上

  nth-child(2n)   选择偶数行

  nth-child(even) 同上

  .test3 li:nth-child(2n){background: red}

  nth-child(n+2)选取大于等于2的li

  .test4 li:nth-child(n+2){background: red}

  nth-child(-n+3)选取小于等于3的li

  .test5 li:nth-child(-n+3){background: red}

  通过上面的介绍不知道大家对于CSS伪类–nth-child是否有个大概的了解,如果还不知道的话,phplife.net建议你边学习边实践,这样会记得更深的。

CSS伪类选择器:nth-child

发表回复

滚动到顶部