css获取除第一个之外的子元素

站长手记 作者: 2024-08-28 08:05:01
有时候我们需要用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>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70015.html
css css子元素