css - 如何在表行元素上使用最后一个子选择器

Question

我正在尝试删除表格行最后一个元素的样式，但是我尝试过的所有操作都会从所有元素中删除样式。我试过 last-child 和 last-of-type 都没有成功。

这是表体的样子

<tr v-for="(status, index) in workflow.statuses" :key="index">
   <th scope="row" class="status-th"><div class="status-order"></div> {{ index + 1 }}</th>
   <td>{{ status.status }}</td>
   <td class="text-center"><i class="fas fa-check text-primary"></i></td>
</tr>

我正在使用带有 .status-order 类的嵌套 div 来制作一些自定义内容。类为 .status-order 的最后一个 div 我想用 last-child:after 选择器删除自定义内容。但是，当我尝试应用选择器时，它会将其从所有表行中删除。这是 css(scss)

.status-order {
  position: relative;
  right: 8px;

  &:before{
    content: " ";
    position: absolute;
    height: 25px;
    width: 25px;
    background-color: #0077ff;
    z-index: -1;
    border-radius: 50%;
    padding-right: 5px;
  }

  &:after {
    content: " ";
    position: absolute;
    left: 10px;
    z-index: -2;
    height: 50px;
    border-right: 5px solid black;
  }

}

这是 css 在表格上创建的内容

我尝试添加以下内容以删除最后一个子内容，但正如我所说，它会删除所有子内容

&:last-child:after {
   border-right: transparent;
}

Answer 1

也许这会对你有所帮助。请检查以下示例。

.custome-table th,
	.custome-table td {
		padding: 10px;
	}
	.status-order {
	  position: relative;
	  right: 8px;
	}
	.status-order:after {
	    content: " ";
	    position: absolute;
	    left: 10px;
	    z-index: -2;
	    height: 40px;
	    border-right: 5px solid black;
	    top: -10px;
	}
	.status-order:before {
		 content: " ";
	    position: absolute;
	    height: 25px;
	    width: 25px;
	    background-color: #0077ff;
	    z-index: -1;
	    border-radius: 50%;
	    padding-right: 5px;
	}
	.custome-table tr:last-child .status-order:after {
		border-color: transparent;
	}

<table class="custome-table" cellpadding="0" cellspacing="0" border="1">
	<tr v-for="(status, index) in workflow.statuses" :key="index">
	   <th scope="row" class="status-th"><div class="status-order"></div> {{ index + 1 }}</th>
	   <td>{{ status.status }}</td>
	   <td class="text-center"><i class="fas fa-check text-primary"></i></td>
	</tr>
	<tr v-for="(status, index) in workflow.statuses" :key="index">
	   <th scope="row" class="status-th"><div class="status-order"></div> {{ index + 1 }}</th>
	   <td>{{ status.status }}</td>
	   <td class="text-center"><i class="fas fa-check text-primary"></i></td>
	</tr>
	<tr v-for="(status, index) in workflow.statuses" :key="index">
	   <th scope="row" class="status-th"><div class="status-order"></div> {{ index + 1 }}</th>
	   <td>{{ status.status }}</td>
	   <td class="text-center"><i class="fas fa-check text-primary"></i></td>
	</tr>
</table>