css3入门

nth-child选择器与nth-last-child选择器

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

使用nth-child选择器和nth-last-child选择器不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式,还以针对父元素中某个指定序列号的子元素来指定样式。

对指定序号的子元素使用样式

nth-child选择器与nth-last-child选择器_1

实现指定序号的子元素使用样式CSS代码:

li:nth-child(1) { background:#0457b5;color:#fff; }
li:nth-last-child(1) { background:#75b504; color:#fff; }

本篇文章实例中用到的HTML代码:

<ul>
 <li>项目列表1</li>
 <li>项目列表2</li>
 <li>项目列表3</li>
 <li>项目列表4</li>
</ul>

对所有第奇数个子元素或偶数个子元素使用样式

除了对指定序列号的子元素使用样式以外,nth-child选择器还可以用来指定对某个父元素中的所有奇数子元素或者偶数子元素使用样式。

nth-child选择器与nth-last-child选择器_2

所有第奇数个子元素或偶数个子元素使用样式CSS代码:

li:nth-child(odd) { background:#ffb10a; color:#fff; }
li:nth-child(even) { background:#75b504; color:#fff; }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    2015-09-30 11:41

  • divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    2015-09-30 11:38

网友点评
p