Как я могу установить псевдо-стили по умолчанию в моем CSS?

Question

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

Я хочу установить глобальный (по умолчанию) стиль для :before а также :after так что мне не нужно повторять стили, как content: ""; снова и снова на протяжении всей моей CSS.

Затем я решил попробовать JSFIDDLE, и у меня было странное поведение.

редактировать

Как я могу применить определенные стили, такие как content: ""; только элементам, которым я назначаю псевдоэлемент? Пример кода в скрипте применяет псевдоэлемент к любому элементу в DOM, а не только к элементам, которым я назначаю псевдоэлемент.

Допустим, у меня есть следующий код:

<div></div>

а также

<div class="sideTri"></div>

со следующим CSS:

:before {
    content: "";
}

.sideTri:before {
    height: 0;
    width: 0;
    border-top: 10px solid brown;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    right: 0;
    bottom: 100%;
}

Это назначит псевдо :before обоим элементам, а не только классу, которому я назначаю псевдоэлемент.

Конец Править

Answer 1

Да, эти псевдоэлементы применяются к html, head, body и все их потомки (по крайней мере, где это применимо в соответствии со спецификацией). Два, которые вы видите, принадлежат html а также body соответственно. (Вы не видите те, сгенерированные head или его потомки, потому что они скрыты по умолчанию, но они есть.)

Вы можете ограничить это с body селектор:

body :before {
    content: "";
    width: 20px;
    height: 20px;
    background: black;
    display: block;
}

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

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