Могу ли я иметь несколько:перед псевдоэлементами для одного и того же элемента?

возможно ли иметь несколько :before pseudos для одного и того же элемента?

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Я пытаюсь применить вышеуказанные стили к одному и тому же элементу с помощью jQuery, но применяется только самый последний, а не оба.

81
css css-content css-selectors css3 pseudo-element

2 ответов

в CSS2.1, элемент может иметь не более одного псевдо-элемента любого типа в любое время. (Это означает, что элемент может иметь как :before и :after псевдо-элемент - он просто не может иметь более одного каждого вида.)

в результате, когда у вас есть несколько :before правила, соответствующие одному и тому же элементу, они будут каскадировать и применяться к одному :before псевдо-элементом, как с нормальным элементом. В вашем примере, конечный результат выглядит это:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

как вы можете видеть, только content объявление с наивысшим приоритетом (как уже упоминалось, последнее) вступит в силу - остальные объявления отбрасываются, как и в случае с любым другим свойством CSS.

это поведение описано в селекторы из спецификации CSS2.1:

псевдо-элементы ведут себя так же, как реальные элементы в CSS с исключениями, описанными ниже и в другом месте.

это означает, что селекторы псевдо-элементы работают так же, как селекторы для нормальных элементов. Это также означает, что каскад должен работать одинаково. Странно, в CSS2.1 представляется только ссылка; ни С помощью CSS3-селекторов, ни С помощью CSS3-каскад упомяните об этом вообще, и еще предстоит выяснить, будет ли это разъяснено в будущей спецификации.

если элемент может соответствовать более чем один селектор с тем же псевдо-элементом, и вы хотите, чтобы все они каким-то образом применялись, вам нужно будет создать дополнительные правила CSS с комбинированными селекторами, чтобы вы могли точно указать, что должен делать браузер в этих случаях. Я не могу привести полный пример, включая content свойство здесь, так как не ясно, например, должен ли символ или текст быть первым. Но селектор нужно для Этот комбинированный правило либо .circle.now:before или .now.circle:before - какой бы селектор вы ни выбрали личные предпочтения, поскольку оба селектора эквивалентны, это только значение content свойство, которое вам нужно будет определить самостоятельно.

Если вам все-таки нужен конкретный пример, см. Мой ответ этот же вопрос.

устаревшая спецификация css3-content содержит раздел о вставке нескольких ::before и ::after псевдо-элементами используя нотацию, совместимую с CSS2.1 каскад, но обратите внимание, что документ устарел - он не обновлялся с 2003 года, и никто не реализовал эту функцию в последнее десятилетие. Хорошей новостью является то, что заброшенный документ активно подвергается переписыванию под видом css-content-3 и css-псевдо-4. Плохая новость заключается в том, что функция множественных псевдоэлементов нигде не встречается ни в одной из спецификаций, предположительно из-за отсутствия интереса к реализации.

74

Если ваш основной элемент имеет некоторые дочерние элементы или текст, вы можете использовать его.

расположите свой основной элемент относительно (или абсолютный / фиксированный) и используйте оба :до и после позиционирования абсолютного (в моей ситуации он должен быть абсолютным, не знаю о ваших).

теперь, если вы хотите еще один псевдо-элемент, прикрепите Абсолют: раньше к одному из дочерних элементов основного элемента (если у вас есть только текст, поместите его в промежуток, теперь у вас есть элемент), который не относительный / абсолютный / фиксированный.

этот элемент начнет действовать так, как будто его владелец является вашим основным элементом.

HTML-код

<div class="circle">
    <span>Some text</span>
</div>

в CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}
20