Question

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

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

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

当前我只选择了所有

：

.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

不确定您的代码，但是您甚至不需要*就可以像这样将: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，{{ 1}}，span）选择

Answer 2

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

value

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

2 个答案: