您可能知道，如果要使用伪元素:before和/或:after而不在其中设置文本，您仍然必须在它们上声明content: '';以使它们可见。
刚刚将以下内容添加到我的基本样式表中：
*:before, *:after {
content: '';
}
。所以我不必再进一步声明它了。
除了我知道*选择器性能不佳的事实(假设上面是一个示例，我可以找到更好的方法来声明这一点，例如列出标签(，这真的会减慢速度吗？我在当前项目中没有注意到任何视觉效果，但我想确保在我将其绝对粘贴到我将要用于每个项目的基本样式表中之前，这是安全的......
有没有人对此进行了深入的测试？你对此有什么要说的？
(顺便说一句，我知道正确的CSS3语法使用双分号(::before，::after(，因为这些是伪元素而不是伪类。
所以我根据@SWilk的建议进行了一些测试。这是我是如何做到的：
1(设置一个基本的HTML页面，在<head>中有一个空的<style>标签，他在<body>底部的<script>标签中提供了一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Performance test</title>
<style>
/**/
</style>
</head>
<body onload="onLoad()">
<div class="container"></div>
<script>
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
</script>
</body>
</html>
2(用HTML的面包填满div.container。就我而言，我去了 html-ipsum.com(无意做广告(，复制每个样本，将它们全部缩小，然后复制了很多次。我的最终 HTML 文件是 1.70 MB，div.container有 33264 个后代(直接或非 ;我通过打电话console.log(document.querySelectorAll('.container *').length);发现(。
3(我在最新的Firefox和Chrome中运行了10次此页面，每次都有一个空缓存。
以下是没有可怕的CSS规则集的结果(以毫秒为单位(：
Firefox :
1785
1503
1435
1551
1526
1429
1754
1526
2009
1486
Average : 1600
Chrome :
1102
1046
1073
1028
1038
1026
1011
1016
1035
985
Average : 1036
(如果你想知道为什么这两者之间有这样的区别，我在Firefox上有更多的扩展。我让他们继续使用，因为我认为使测试环境更加多样化会很有趣。
4( 在空 <style> 标签中添加我们要测试的 CSS：
html:before, html:after,
body:before, body:after,
div:before, div:after,
p:before, p:after,
ul:before, ul:after,
li:before, li:after,
h1:before, div:after,
strong:before, strong:after,
em:before, em:after,
code:before, code:after,
h2:before, div:after,
ol:before, ol:after,
blockquote:before, blockquote:after,
h3:before, div:after,
pre:before, pre:after,
form:before, form:after,
label:before, label:after,
input:before, input:after,
table:before, table:after,
thead:before, thead:after,
tbody:before, tbody:after,
tr:before, tr:after,
th:before, th:after,
td:before, td:after,
dl:before, dl:after,
dt:before, dt:after,
dd:before, dd:after,
nav:before, nav:after {
content: '';
}
。然后重新开始。在这里，我指定了页面中使用的每个标签，而不是*(因为它本身性能不佳，我们只想监视伪元素触发(。
因此，以下是触发所有伪元素的结果(仍以毫秒为单位(：
Firefox :
1608
1885
1882
2035
2046
1987
2049
2376
1959
2160
Average : 1999
Chrome :
1517
1594
1582
1556
1548
1545
1553
1525
1542
1537
Average : 1550
根据这些数字，我们可以得出结论，在每个伪元素上声明content: ''时，页面加载确实较慢(大约 400-500 毫秒(。
，现在剩下的问题是：考虑到使用的相对较大的测试页面，我们在这里看到的额外加载时间是否有意义？我想这取决于网站/项目的大小，但如果他们愿意，我会让更多了解网络性能的人在这里发表意见。
如果您运行自己的测试，请随时在此处发布您的结论，因为我对阅读它们非常感兴趣 - 我想我不会是唯一一个。
我的回答是：我不知道，但可以测试一下。
阅读有关导航计时的信息并查看此示例页面
最简单的用法示例：
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
所以，去生成几MB的充满随机标签的html，然后进行测试。