选择子标签：在元素之后，除了最后一个

Question

我有一个 Angular 应用程序，其中 div 中有自定义组件（标签）：

<div class="parent">
    <custom-1></custom-1>
    <custom-2></custom-2>
    <custom-3></custom-3>
    <custom-4></custom-4>
</div>

我想在.parent 中选择所有子标签的:after，所以我可以在组件之间创建一条分隔线，除了最后一个之后。

目前我只选择了所有：

.parent > *:after {
    content: "";
    height: 60%;
    width: 1px;
    background-color: black;
    position: absolute;
    right: 0;
    top: 5px;
}

似乎* 忽略了:last-of-type，因为如果我这样使用它：.parent > *:last-of-type:after，它不会选择任何东西。

Answer 1

如果可能的话，你可以为你的组件使用一个通用类

.parent > :after {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 5px;
background-color: orange;
}
<div class="parent">
   <custom-1 class="mychild"></custom-1>
   <custom-2 class="mychild"></custom-2>
   <custom-3 class="mychild"></custom-3>
   <custom-4 class="mychild"></custom-4>
</div>


 

Answer 2

不确定您的代码，但您甚至可能不需要*，您可以像这样组合:last-child 和:after

.parent > :after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 5px;
    background-color: orange;
}


.parent > :last-child:after {
    background-color: green;
}

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

您需要使用* 来选择.parent 元素内的所有元素。所以如果.parent 中的子元素有更多的子元素

Last of type 不起作用，因为:after 是伪元素，:last-of-type 将检查要选择的元素类型（如div、span、p）