html - div 和 span 上的伪元素

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 7 年前。

我试图理解为什么“之前在这里”显示在我的 div 的每个跨度上。我想缺少一些东西来理解 :before 行为。如果有人能澄清为什么“之前在这里”不是只显示一次而是应用于每个跨度，那就太好了。

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

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

最佳答案

空间有所不同。当你放置 #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>

希望你明白。

关于html - div 和 span 上的伪元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34223674/

相关文章：

html - 有没有办法用 css 悬停图像来实现这种效果？