:nth‐child()
定义:匹配当前元素及与之相同的所有兄弟元素,修改其样式
触发条件:( )中为数字值,从1开始(注意,不是下标,木有0),也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素,2n+1代表匹配所有相同的奇数元素;也可以使用关键字odd(代表奇数)和even(代表偶数),修改指定的元素样式
兼容:IE8及8以下不支持 Opera9.5以下不支持
:first‐child
定义:匹配在一组兄弟元素中的第一个元素,修改其样式
触发条件:当所匹配元素为一组兄弟元素中的第一个元素时,修改其样式,相当于:nth-child(1)
兼容:IE7以下不支持 Opera9.5以下不支持
:last‐child
定义:匹配在一组兄弟元素中的最后一个元素,修改其样式
触发条件:当所匹配元素为一组兄弟元素中的最后一个元素时,修改其样式
兼容:IE8及8以下不支持 Opera9.5以下不支持
举个栗子
html代码:
<header>
<ul>
<li>首页</li>
<li>博客</li>
<li>书声</li>
<li>分享</li>
<li>留言</li>
</ul>
</header>
css代码:
header{
width: 38%;
height: 50px;
margin: 0 auto;
}
ul{
width: 100%;
background-color: #33CCFF;
padding: 0 30px;
box-sizing: border-box;
}
li{
cursor: pointer;
display: inline-block;
width: 80px;
line-height: 50px;
font-size: 14px;
text-align: center;
color: #fff;
border-right: 1px solid #000;
}
li:nth-child(1){
border-left: 1px solid #000;
}
li:nth-child(2n){
color: #00FF33;
}
li:first-child:hover{
color: #990099;
font-weight: 900;
}
li:last-child:hover{
color: #990099;
font-weight: 900;
}
li:nth-child(3):active{
color: #990099;
font-weight: 900;
}
效果图: