css3入门

first-child选择器与last-child选择器

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

在该实例中对ul项目列表进行样式的指定,分别使用first-child选择器与last-child选择器对第一个列表项目和最后一个项目列表分别指定不同的背景颜色。

first-child选择器与last-child选择器

实现图示的CSS代码:

li:first-child { background:#0457b5;color:#fff; }
li:last-child { background:#75b504; color:#fff; }

实现图示效果的HTML代码:

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

使用first-child选择器将第一个项目列表背景变为蓝色、字体颜色变为白色,使用last-child选择器将最后一个背景变为绿色、字体颜色变为白色。

 

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

网友点评
j