CSS教程:last-child与:first-child使用教程

文章目录[隐藏]

:first-child
选择元素的第一个元素
:last-child
选择元素的最后一个元素

举例

1、在一个导航条中每个导航项都有一个右边框效果,但最后一个不想要这个右边框,此时就可以使用“:last-child”。

#nav > li {
 ......
  border-right: 1px solid #ccc;
}
#nav > li:last-child {
  border-right: none;
}

当然你也可以让一个Li的背景颜色不同,如下

#nav > li {
 ......
  border-right: 1px solid #ccc;
}
#nav > li:first-child {
  border-right: none;
}

2、博客制作中,假设“post”中最后一段不需要底部“margin”值,代码如下:

.post > p:last-child {
  margin-bottom: 0;
}

3、改变最后一个段落 P 的背景颜色

p:last-child
{
background:#ff0000;
}

发布日期:

所属分类: Css/Html5 标签: