Как браузер отображает селектор псевдоэлементов?

Question

Что мне особенно интересно, насколько дорого стоит *:after, ресурсо-мудрый. Будет ли псевдоэлемент становиться ключевым селектором в этом случае? Или клиент все-таки захватит все элементы?

Иными словами, в чем разница между *:after и * по производительности?

---

[отредактировано. глупый пример. мой плохой.]

Для уточнения, я пытаюсь использовать рисунок, используя только css, и обнаружил, что использую много псевдоэлементов. Просто блуждайте, если я смогу сэкономить некоторое время, написав

*:after, 
*:before { 
    content:''; 
} 

и стоимость его ресурсов.

Спасибо.

Answer 1

После Вопрос Edited

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

.container *:not(span) { 
    color: red; 
} 

Или (но ниже одного будет выбрать все элементы, вложенные в .container)

.container * { 
    color: red; 
} 

Demo

---

Перед Вопрос Edited

Я не в состоянии понять, что вы спрашиваете здесь, но оба селекторы совершенно разных .. они используются для различных целей, Я не знаю, является ли это опечаткой в ​​вашем вопросе, но с использованием *:after часто используется с content, который должен быть встроен :before или :after.

Так, например

*:after { 
    content: " <"; 
} 

Demo

И когда вы используете это, * .after, будет выбирать элементы, имеющие класс .after

* .after { 
    color: red; 
} 

Demo 2

---

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

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

---

Кроме того, последнее, но не наименее, я не нахожу причины использовать *:after, так как вы не будете внедрять какой-либо контент, используя :after для каждого элемента.

Answer 2

Будет ли псевдоэлемент становиться ключевым селектором в этом случае?

Технически объектом селектора является *, то есть в зависимости от того элемента подобран * будет один генерации псевдо-элемент.

Термин «селектор ключей» не имеет четкого определения, когда речь идет о псевдоэлементах, плюс в отличие от концепции селекторов объектов, это на самом деле деталь реализации. Если «селектор ключей» означает «селектор, представляющий окно, которое визуализируется», то я полагаю, что вы могли сказать, что псевдоэлемент является селектором клавиш. Однако я не знаком с деталями реализации, поскольку я не разработчик.

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

1. Попытка соответствовать элементу против селектора, игнорируя псевдо-элемент для теперь (в данном случае, *).

2. Если элемент соответствует селектору, попытка создать поле псевдо-элемент как дочернее поле этого элемента (в случае сгенерированных псевдо-элементов, таких как :before и :after), если это применимо (некоторые элементы не могут генерировать псевдо-элементы).

3. Применить стили к элементу псевдоэлемента и отобразить его как с любым другим полем.

Разница между двумя вашими селекторами заключается в том, что первый содержит псевдоэлемент, а последний - нет. Поскольку они имеют принципиально разные вещи, несправедливо сравнивать их по производительности.Тем не менее, они оба делают пытаются сопоставить любой элемент в DOM, поскольку оба они используют один и тот же универсальный селектор *, поэтому, не допуская каких-либо специальных оптимизаций, можно с уверенностью предположить, что только накладные расходы, которые поставляются с *:after, рендеринг псевдоэлемента.

Поскольку мы говорим о производительности, помните, что соответствие элемента * почти мгновенно, поскольку это в основном гарантированное соответствие; это только тогда, когда вы объединяете его с более сложными селекторами, что он становится дороже на уровне селектора, и, в конечном счете, его производительность в наибольшей степени зависит от количества элементов, которые у вас есть в DOM, это все равно не так дорого, как на самом деле делает стили если у вас нет элементов в тысячах.

---

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

#mycanvas *:after, 
#mycanvas *:before { 
    content:''; 
}