Приоритет стилей псевдоэлементов

Я играл со стилями псевдоэлементов и обнаружил поведение, которое меня озадачило.

Рассмотрим следующие CSS и HTML

HTML:

 <p>
        Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::.
    </p>

и стили

p::first-letter {
    font-size: 20px;
    color: red;
}

p::first-line {
    font-variant: small-caps;
    color: green;
}

p::before {
    content: 'Start';
    color: blue;
}

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

Также, когда в :: before content нет буквы, и я помещаю туда & или * - вся первая строка становится зеленой и не применяются стили :: first-letter и :: before.

В Firefox результат предоставленного кода будет следующим: введите описание изображения здесь

Я использую последние версии браузера под Ubuntu 17.04

Итак, может ли кто-нибудь объяснить, почему контент :: before выбирается другими селекторами псевдоэлементов, и к ним применяются стили, и почему стили own :: before не перезаписывают их, даже если они являются «более поздними» стилями.


css css-selectors pseudo-element
person Olena Horal    schedule 26.07.2017    source источник
comment
Специфичность для всех селекторов - 2. Я бы сказал, что побеждает последний. Но это не так   -  person Olena Horal    schedule 26.07.2017
comment
Нет, моя первая буква красная, а не синяя   -  person Olena Horal    schedule 26.07.2017
comment
ах извините, неправильно прочитал ваш пост, ха-ха, удаляю мои комментарии :)   -  person treyBake    schedule 26.07.2017
comment
Псевдоэлементы вносят вклад в специфичность селектора, но два правила с разными псевдоэлементами не конкурируют друг с другом, даже если остальная часть каждого селектора одинакова. Так что конкретика здесь не актуальна. Проблема с заменой стилей :: first-line стилей :: before и :: after в Chrome на не новый, но, похоже, это не обсуждается в системе отслеживания проблем или в www-стиле.   -  person BoltClock    schedule 26.07.2017

Ответы (1)


arrow_upward
3
arrow_downward

Что касается первой строки и первой буквы, это не проблема специфики. Это просто указано так:

Как и в случае с содержимым обычных элементов, сгенерированное содержимое псевдоэлементов :: before и: after может быть включено в любые псевдоэлементы :: first-line и :: first-letter, применяемые к его исходному элементу.

(исходный код)

person Denys Séguret    schedule 26.07.2017
comment
Спасибо, это объясняет, почему применяются стили :: first-line и :: first-letter. Но почему последний (а именно: before) не выигрывает? - person Olena Horal; 26.07.2017
comment
@OlenaHoral Я не уверен насчет этого. Похоже, что при стилизации псевдоэлементов существует много неопределенного (или, по крайней мере, неясного) поведения, потому что они сами существуют как результаты правил. - person Denys Séguret; 26.07.2017
comment
@OlenaHoral В любом случае не принимайте мой ответ, ваш вопрос заслуживает лучшего ответа. - person Denys Séguret; 26.07.2017
comment
Это самый хороший ответ. Ужасающая формулировка (только усугубляемая отсутствием вымышленных последовательностей тегов для случаев, когда задействовано :: before / :: after) означает, что ни один браузер не является правильным или неправильным. Поведение Chrome ближе к спецификации, но по какой-то причине поведение всех остальных кажется ближе к ожиданиям автора. IMO не имеет смысла только :: first-letter, но не :: first-line иметь приоритет над стилями :: before / :: after. - person BoltClock; 26.07.2017