Question

这可能是一个愚蠢的问题，但如果我有这样的事情：

<div id="topDiv">
  <header id="headerId" class="headerClass" style="display: block;">
    ::before
    <div>...</div>
    <div>...</div>
    <div>...</div>
  </header>
</div>

html中的'之前'有什么作用？

我理解如果我在CSS中执行以下操作，它会在每个p元素之前添加这些属性:(这来自W3Schools示例）

    p::before { 
      content: "Read this -";
      background-color: yellow;
      color: red;
      font-weight: bold;
   }

Answer 1

您看到::before，因为这是您的浏览器的开发人员工具在文档树视图中表示CSS ::before伪元素的方式。

如果你真的有一串文字＆＃34; ::之前＆＃34;在HTML文件中，它没有什么特别之处，因为它在HTML中没有意义;它只会显示为文本＆＃34; :: before＆＃34;在你的页面上。

Answer 2

我猜可能有两个原因（通过个人经验和观察不是支持的有效参考）

1）它根据它们的含义提供了这些伪选择器的可视化表示 ::before在其应用的div之前::after以及div之后应用于其中的content:''

2）伪选择器用于在HTML中插入一些HTML。所以这提供了一个独特的表示。用户可以通过这些伪点轻松检查{{1}}中插入的内容。

是的，它在每个浏览器上如何实现并显示伪。

祝你好运！

Answer 3

说明你的html中有一个伪元素。因为它不是真正的＆＃39;元素，你可以像对待真正的“真实”一样对它进行物理操作。像div和按钮这样的元素。

您可能还会看到::after出现在地方，代表您id="headerId"或class="headerClass"声明了::before元素的位置。

他们没有被宣称为<after></after>或类似这样的事情的全部原因是因为它是一个幽灵＆＃39;或者＆＃39;影子＆＃39;一个＆＃39; 真实元素＆＃39;，因此只能在呈现html之前在css中进行样式/操作。

什么::之前在自己的行上做HTML？

3 个答案: