选择器的使用(first-child和last-child选择器)
2014-10-07 19:10
232 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
li:first-child {
background-color:limegreen;
}
li:last-child {
background-color:red;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
<hr />
<h2>列表B</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>
效果如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
li:first-child {
background-color:limegreen;
}
li:last-child {
background-color:red;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
<hr />
<h2>列表B</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>
效果如下:
相关文章推荐
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- 选择器的使用(nth-child和nth-last-child选择器)
- first-child 和 last-child的使用
- CSS3选择器:属性、:root、:not、:empty、:target、first-child、last-child....
- 【CSS3】---结构性伪类选择器-first-child+last-child
- css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
- 让IE7/8使用CSS中first-child和last-child样式属性
- jquery 的:first-child 和:last-child 选择器实例
- 【CSS3】---结构性伪类选择器-first-child+last-child
- CSS3---结构性伪类选择器—first-child
- Jquery 过滤器(first,last,not,even,odd)的使用
- jQuery选择器中last-of-type和first-of-type效果案例
- jQuery选择器中last-of-type和first-of-type效果案例
- Magento 使用小技巧体现大智慧(Last things first)
- css:first-child、last-child、nth-child、 nth-last-child
- jquery 中 first 与 first-child选择器的区别
- 选择器的使用(nth-of-type和nth-last-of-type选择器)
- 解析dom中的children对象数组元素firstChild,lastChild的使用
- jQuery :first选择器使用介绍