:nth-child()
选择同级的,第 n 个元素。
例子
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
<style>
.container :nth-child(2){
color: red;
}
</style>
这里被选中的,是 class 为 .b
的元素。
注意!这里
.container
之后,与:nth-child
之前有一个空格!
:nth-child(n)
这里,n 的取值,可以是一些数字,也可以是 even
或 odd
,表示:
- even:第 2,4,6,8,,,个元素
- odd:第 1,3,5,7,,,个元素
n 的取值,还可以是3n+1
这种表达式,表示第 1,4,7,10,13,,,个元素
实用场景
隔行变色
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
<style>
.container :nth-child(even){
background: red;
}
</style>
弟弟选择器
很多同仁叫它“兄弟选择器”,但是码者觉得叫“弟弟”更合适一点,因为这个选择器只能选择“与某元素同级的下一个元素”。
例子
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<style>
.a + div{
color: red
}
</style>
这个 .a + div
选择的是 class 为 .b
的 div。即与 .a
同级的下一个 div,即 .b
。
实用场景
需求
所有 <a></a>
标签,左右与其他元素设置 10px
的边距
分析
本来这样就够了:
a{
margin: 0 10px;
}
但是,如果好几个 <a></a>
标签挤在一起时,相邻的 <a></a>
标签之间,实际相距 20px
,间距太大了!不好看!
但是,可以这样:
<div class="container">
<a>修改状态</a>
<a>编辑</a>
<a>删除</a>
</div>
<style>
a{
margin: 0 10px;
}
a + a{
margin-left: 0;
}
</style>