如何在表行元素上使用last-child选择器

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>

我使用嵌套div与.status-order类来制作一些自定义内容。使用.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

您无法直接使用类.status-order进行选择。考虑根据.status-order值为最后一个key添加一个不同的类。

Answer 2

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

.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>