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
Я не хочу - для последнего ребенка. Я хочу вывод, как это
A-B-C-D-E F G
Я перепробовал много вариантов. Например, один из них, который я попробовал
title-inside:last-child ::after {
content: ''
}
Но это не работает. Может ли кто-нибудь, пожалуйста, помогите мне
2 ответа
Использовать :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
:host/deep/.title-main {
display: flex;
margin-bottom: 0;
.title-inside {
&:not(:nth-last-of-type(3)){
&::after{
content : '-';
}
}
}
}
Поскольку селекторы :nth-*
и last-child
используют фактический тип элемента, а не имя класса, я думаю, что лучше использовать селектор класса.
Вместо этого, используя псевдо ::before
в сочетании с селектором родного брата +
, не имеет значения, сколько предметов имеет каждый класс, он всегда будет считаться правильным.
.title-main {
display: flex;
margin-bottom: 0;
}
.title-main .title-inside + .title-inside::before {
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>
<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-outside">D</span>
<span class="title-outside">E</span>
<span class="title-outside">F</span>
<span class="title-outside">G</span>
</h2>
SASS
:host/deep/.title-main {
display: flex;
margin-bottom: 0;
.title-inside {
&+.title-inside {
&::before{
content : '-';
}
}
}
}
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].