选到你满意：完美掌握 css 选择元素的方法

前言

如果你是一个前端开发人员，那么你肯定知道 CSS 的重要性。而当我们在设计页面时，经常需要对一些元素进行特殊处理，以使它们更加突出。在这个过程中，你可能会遇到这样的问题：如何选择除第一个元素后面的所有元素或者如何选择除最后一个元素前面的所有元素呢？今天，我将为大家介绍此类问题的方法。

html 代码

<div class="titContant">
  <div>合同编号</div>
  <div>订单编号</div>
  <div>创建人</div>
  <div>所属分公司</div>
  <div>创建时间</div>
  <div>合同状态</div>
</div>

titContant 样式代码

.titContant {
  display: flex;
  justify-content: space-between;
}

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

css 代码

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

页面展示

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

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

页面展示

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

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

页面展示

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

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

页面展示

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

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

页面展示

六、选择奇数（单数）的元素，可通过 :nth-child(odd) 实现

.titContant :nth-child(odd) {
  color: cornflowerblue;
}

页面展示

七、选择偶数（双数）的元素，可通过 :nth-child(even) 实现

.titContant :nth-child(even) {
  color: cornflowerblue;
}

页面展示