it-swarm.com.ru

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

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

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

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

98
ChrisOdney

В 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- и css-pseudo-4 . Плохая новость заключается в том, что в обеих спецификациях нигде не встречается функция множественных псевдоэлементов, возможно, опять же из-за отсутствия интереса со стороны разработчика.

82
BoltClock

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

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

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

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

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 */
}
24
HydraOrc