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

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;
}

页面展示
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Shids_/article/details/114918748