HTML:
<h2 class="title-main">
<span class="title-inside">A</span>
<span class="title-inside">B</span>
<span class="title-inside">C</span>
<span class="title-inside">D</span>
<span class="title-inside">E</span>
<span class="title-outside">F</span>
<span class="title-outside">G</span>
</h2>
CSS:
:host/deep/.title-main {
display: flex;
margin-bottom: 0;
.title-inside {
&:after {
content : '-';
}
}
}
我得到这样的输出
A-B-C-D-E-F G
我不想要最后一个 child 的 - 。我想要这样的输出
A-B-C-D-E F G
我尝试了很多选择。例如。其中一个我试过
title-inside:last-child ::after {
content: ''
}
但这行不通。谁能帮帮我
最佳答案
使用 :not
和 :nth-last-of-type()
.title-main {
display: flex;
margin-bottom: 0;
}
.title-inside:not(:nth-last-of-type(3))::after {
content: '-';
}
<h2 class="title-main">
<span class="title-inside">A</span>
<span class="title-inside">B</span>
<span class="title-inside">C</span>
<span class="title-inside">D</span>
<span class="title-inside">E</span>
<span class="title-outside">F</span>
<span class="title-outside">G</span>
</h2>
这是 SASS version
:host/deep/.title-main {
display: flex;
margin-bottom: 0;
.title-inside {
&:not(:nth-last-of-type(3)){
&::after{
content : '-';
}
}
}
}
关于html - 使用 css 选择器 lastchild 和 :after together in angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43586221/