CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of
【摘要】 1. first-child（IE7兼容）、last-child（IE8不兼容）html：<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> </ul></body>css：<style> ul {list-style: none;} ...
1. first-child（IE7兼容）、last-child（IE8不兼容）
html：
<body>
<h2>列表</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
</ul>
</body>
css：
<style>
ul {list-style: none;}
li:first-child {/*给第一个列表项目设置样式 兼容IE7*/
background-color: pink;
}
li:last-child { /*给最后一个列表项目设置样式 IE8不兼容*/
background-color: red;
}
</style>
解析：
一个页面中无论有几个ul列表，只要设置first-child、last-child，那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。
2.nth-child、nth-last-child （IE8不兼容）
html：
<body>
<h2>列表</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
</body>
css：
<style>
ul {list-style: none;}
li:nth-child(3) { /*表示li元素中，第三个元素 IE8不兼容*/
background-color: pink;
}
li:nth-last-child(2) { /*表示li元素中，倒数第二个元素 IE8不兼容*/
background-color: red;
}
</style>
3. 对奇数、偶数使用样式
html:
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
css：
<style>
ul {list-style: none;}
li:nth-child(odd) {/*表示li元素中，从1开始 奇数为pink*/
background-color: pink;
}
li:nth-child(even) {/*表示li元素中，从1开始 偶数为灰色*/
background-color: #ccc;
}
</style>
解析： li:nth-child(odd)含义：li父元素ul的儿子中，从1开始数，奇数儿子设置样式为xxx;
当父元素为列表时，因为只有列表项目一种子元素，不会出现问题；当父元素是div时，就不止一种子元素，会引起问题。如下：
例如：设置div元素中为奇数标题h2背景颜色。
html:
<div>
<h2>文章标题A</h2>
<p>我是一个小段落。。。</p>
<h2>文章标题B</h2>
<p>我是一个小段落。。。</p>
<h2>文章标题C</h2>
<p>我是一个小段落。。。</p>
<h2>文章标题D</h2>
<p>我是一个小段落。。。</p>
</div>
css:
h2:nth-child(odd) {
background-color: pink;
}
解析：由于div元素下奇数元素为p，偶数元素为后，故 h2:nth-child(odd)执行结果为：h2的父元素div 的所有儿子中 为奇数的儿子 设置背景颜色；而不是所有h2中为偶数的h2设置样式；
解决方法： nth-of-type可以避免问题产生。
4. nth-of-type（IE8不兼容）：只针对同类型的元素进行计算
css:
h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/
background-color: pink;
}
h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/
background-color: #ccc;
}
解析： h2:nth-of-type(odd)含义：在所有h2标签中，只要是奇数h2就设置样式；只针对h2标签，与父元素无关；
5. 循环使用样式 li:nth-child(4n+1)
html：
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
<li>列表项目7</li>
<li>列表项目8</li>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
css：
<style>
ul {list-style: none;}
li:nth-child(4n+1) { /*表示li元素中，4个li为一组循环 第一个li设置为*/
background-color: red;
}
li:nth-child(4n+2) { /*表示li元素中，4个li为一组循环 第二个li设置为*/
background-color: pink;
}
li:nth-child(4n+3) {
background-color: #ccc;
}
li:nth-child(4n+4) {
background-color: yellow;
}
</style>
解析：
4n含义：四个li元素为一组循环；
4n+1含义：这一组循环中，第一个样式；
4n+2含义：这一组循环中，第二个样式；
4n+3含义：这一组循环中，第三个样式；
4n+4含义：这一组循环中，第四个样式；
拓展阅读
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）