css - 如何在我的 css 中设置默认的伪样式？

Question

我想开始缩小我必须编写的 css，并认为从长远来看这会节省很多行。

我想为 :before 和 :after 设置全局(默认)样式，这样我就不必像 content: ""; 在我的 CSS 中一遍又一遍。

然后我决定在 JSFIDDLE 中尝试一下并且有一些奇怪的行为。

编辑

我如何才能将某些样式(如 content: "";)仅应用于我分配了伪元素的元素？ fiddle 中的示例代码将伪元素应用于 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 和它们的所有后代(至少，根据 spec 适用)。您看到的两个分别属于 html 和 body。 (您看不到 head 或其后代生成的那些，因为它们在默认情况下是隐藏的，但它们就在那里。)

您可以 restrict this with a body selector :

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

但我强烈建议不要像这样普遍应用 :before 和 :after 伪元素，如果没有别的，因为它会产生不必要的开销——现在每个元素都必须绘制一个额外的伪元素框。

让每个元素都生成一个伪元素几乎没有合理的用例。限制将它们应用于哪些元素通常是一个更好的主意，而不是只将它们应用于所有内容；这样您就可以最大程度地控制它们。