有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。
<style>
.dom div{
float: left;
height: 150px;
line-height: 150px;
width: 150px;
margin: 20px;
background: #ccc;
text-align: center;
color:#fff;
}
</style>
<div class="dom">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
方法1:使用伪类选择器:not
<style>
.dom div:not(:first-child){
background:red;
}
</style>
方法2:使用nth-of-type或者nth-child
<style>
.dom div:nth-of-type(n+2){
background:red;
}
</style>
<style>
.dom div:nth-child(n+2){
background:red;
}
</style>
方法3:巧妙使用+或者~兄弟选择符
<style>
.dom div+div{
background:red;
}
</style>
<style>
.dom div~div{
background:red;
}
</style>