Question

我试图理解为什么“在这里之前”在我的div的每一个跨度上显示。我认为缺少一些东西来理解：行为之前。如果有人能够澄清为什么“之前就在这里”不会只显示一次而且适用于每一个跨度，那就太棒了。

#test :before {
  content:"before is here ";
  color:red;
}

<div id="test">
  <span>Span 1</span>
  <span>Span 2</span>
</div>

Answer 1

伪元素 ::before和::after使用以下语法表示：a 双冒号，紧跟在元素/ id之后/ class有问题。

CSS3 pseudo-element double colon syntax (W3C)

双冒号区分伪元素与伪类，如:hover和:target，它们由单个冒号表示

因此，您的样式声明应为：

#test::before {
  content: 'before is here ';
  color: red;
}

Answer 2

float hash(vec2 co){ float t = 12.9898*co.x + 78.233*co.y; return fract((A2+t) * sin(t)); // any B2 is folded into 't' computation }与:before不同。

::before将以下CSS应用于#test :before的每个子项，其中#test element将CSS应用于元素本身。

#test::before

以你想要的方式工作。

Answer 3

空间有所不同。当你放#test :before时，它意味着：

#test *::before

以上表示所有包含的::before伪元素。

没有空格：#test:before，它意味着：

#test::before

这只会影响您正在寻找的#test。查看使用有和没有空格的片段：

#test :before {
  content:"before is here ";
  color:red;
}

<div id="test">
  <span>Span 1</span>
  <span>Span 2</span>
</div>

没有空间

#test:before {
  content:"before is here ";
  color:red;
}

<div id="test">
  <span>Span 1</span>
  <span>Span 2</span>
</div>

希望你理解。