我特别想知道的是,使用 *:after
会不会在资源方面比较昂贵。在这种情况下,伪元素会成为关键选择器吗?还是客户端会抓取所有元素?
换句话说,使用 *:after
和 *
有什么性能上的区别吗?
[编辑。愚蠢的例子。我的错。]
为了澄清,我正在尝试只使用 CSS 绘制一些东西,并发现自己正在大量使用伪元素。只是想知道是否可以通过编写 ... 来节省时间。
*:after,
*:before {
content:'';
}
以及它的资源成本。
谢谢。
我特别想知道的是,使用 *:after
会不会在资源方面比较昂贵。在这种情况下,伪元素会成为关键选择器吗?还是客户端会抓取所有元素?
换句话说,使用 *:after
和 *
有什么性能上的区别吗?
[编辑。愚蠢的例子。我的错。]
为了澄清,我正在尝试只使用 CSS 绘制一些东西,并发现自己正在大量使用伪元素。只是想知道是否可以通过编写 ... 来节省时间。
*:after,
*:before {
content:'';
}
以及它的资源成本。
谢谢。
#mycanvas *:after,
#mycanvas *:before {
content:'';
}
问题编辑后
我现在对你想要问什么有了明确的了解,当你使用*
时,它会选择所有元素,但这样不够精确。如果你想,你可以使用类似于以下的内容:
.container *:not(span) {
color: red;
}
.container
内的元素).container * {
color: red;
}
在问题编辑前
我不太明白你在问什么,但是这两个选择器是完全不同的。它们用于不同的目的。我不知道你的问题是否有笔误,但使用*:after
通常与必须嵌入:before
或:after
的content
一起使用。
例如:
*:after {
content: " <";
}
当您使用这个方法时,* .after
会选择具有 .after
类的元素。
* .after {
color: red;
}
就优化而言,我认为在一般网站中使用*
并不是一个很大的性能问题,我经常使用以下选择器来保存属性:
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:after
,因为您不会为每个元素使用:after
来嵌入某些内容。
*:after
中做什么。 - Mr. Alien.container *
- Mr. Alien