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

Question

我正在尝试删除表格行最后一个元素上的样式，但是我尝试过的所有操作都会从所有元素中删除样式。我尝试>>> from django.contrib.staticfiles.templatetags.staticfiles import static >>> static('admin/css/base.css') '/static/studio/admin/css/base.f4e3330c1326.css' 和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的最后一个div我想使用.status-order选择器删除自定义内容。但是，当我尝试应用选择器时，会将其从所有表行中删除。这是css（scss）

last-child:after

这是CSS在表上创建的

我尝试添加以下内容以删除最后一个子内容，但就像我说的那样，它删除了所有子内容

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

}

Answer 1

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

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>