Как настроить таргетинг на CSS: последний тип последовательных элементов (не ВСЕ в родительском элементе) - PullRequest
Новая
       11

Как настроить таргетинг на CSS: последний тип последовательных элементов (не ВСЕ в родительском элементе)

0 голосов
/ 10 октября 2019

Возможно, это невозможно в CSS3, но я пытаюсь автоматически вставить разделители запятых, когда в абзаце несколько последовательных экземпляров сносок.

Проблема возникает, когда позже в сноске появляется другая сноска. параграф. В примере 2 вы заметите, что запятая вставляется после сноски 2.

Я пытался поменять ее и использовать first-child, но это просто заканчивается наоборотта же проблема. 

sup:not(:first-child)::before {
    content: ",";}

sup:last-child::before {
    content: "";
}

Кто-нибудь знает способ нацеливания на последний тип, когда за ним следует любой другой контент, отличный от другого того же типа? 

sup:after {
        content: ",";
    }

sup:last-of-type:after {
        content: "";
    }
<h2>Example 1</h2>
<p>lorem upsum<sup>1,2</sup></p>

<h2>Example 2</h2>
<p>lorem upsum<sup>1,2</sup> flotsam jetsum<sup>3</sup></p>

1 Ответ

1 голос
/ 10 октября 2019

У вас уже есть ответ: все, что вам нужно сделать, это удалить ВСЕ ваши CSS , поскольку он практически ничего не делает. 

sup:after {
   content: ",";
}

sup:last-of-type:after {
        content: "";
    }

В вашем html ,ваш код <sup>1,2</sup>, что означает, что вы уже вручную вводите , для нескольких значений в <sup>.

Этот конкретный , в <sup> с несколькими значениями не генерируется указанным выше CSS , а, скорее, существует только потому, что вы вводите его вручную.

В <p> только с одним <sup> причина, по которой у него нет ,, заключается в вашем классе sup:last-of-type:after. Поскольку существует только один экземпляр <sup>, он также считается последним, поэтому к концу его добавляется содержимое "". Который снова ничего не делает, так как по умолчанию он пуст. 

<h2>Example 1</h2>
<p>lorem upsum<sup>1,2</sup></p>

<h2>Example 2</h2>
<p>lorem upsum<sup class="sup-multiple">1,2</sup> flotsam jetsum<sup>3</sup></p>
...