css选择除第一个元素后面的所有元素

小半 • 2023年1月18日下午6:38 • 技术随笔 • 阅读 189

1.1 选择除第一个元素后面的所有元素，可通过 :nth-child(n + 2) 实现

html页面

<div class="titContant">
     <div>合同编号：xxx454136541353413</div>
     <div>订单编号：xxx235463126413646</div>
     <div>创建人：xxxzm</div>
     <div>所属分公司：xxx有限公司</div>
     <div>创建时间：2021.05.04</div>
     <div>合同状态：生效中（未生效）</div>
</div>

css页面

.titContant div:nth-child(n + 2) {		//n+2就是从第二个元素开始往后所有的元素
    padding-left: 50px;
    color: cornflowerblue;
}

页面展示

1.2 选择除最后一个元素前面的所有元素，可通过 :not(:last-child) 实现

.titContant div:not(:last-child) {		//:not(:last-child)就是除最后一个前面所有的元素
    padding-left:50px;
    color: cornflowerblue;
}

页面展示

1.3 只选择最后一个元素，可通过 :last-child 实现

.titContant div:last-child  {		//:last-child选择最后一个元素
    padding-left:50px;
    color: cornflowerblue;
}

页面展示

1.4 只选择第一个元素，可通过 :first-child 实现

.titContant div:first-child  {		//:first-child就是选择第一个元素
    padding-left:50px;
    color: cornflowerblue;
}

页面展示

1.5 选择某一个元素，可通过 :nth-child(n) 实现

.titContant div:nth-child(3) {		//:nth-child(3)括号里面的数字就是你想要选择控制的元素
    padding-left:50px;
    color: cornflowerblue;
}

页面展示

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79453.html

css选择除第一个元素后面的所有元素

相关推荐