什么自我关闭元素可以::之前和::之后应用伪元素

时间:2014-10-29 14:39:45

标签: html css css3 w3c pseudo-element

我特别感兴趣的是了解::before::after伪元素何时可以应用于自闭标签。根据{{​​3}}:

,这是这些伪元素的定义
  

12.1:before和:after伪元素:作者使用:before和:after伪元素指定生成内容的样式和位置。正如其名称所示,:before和:after伪元素指定元素文档树内容之前和之后的内容位置。 'content'属性与这些伪元素一起指定插入的内容。

基于此,似乎这些伪元素旨在修改元素的内容。据我了解(虽然我找不到支持这一点的权威来源),“内容”或多或少被定义为“开始和结束标签之间的东西”;因此,我认为没有“内容”的元素(例如HTML br标记)不应支持::before::after伪元素。

对此进行推断,并根据我对元素“内容”定义的理解,我认为自动关闭标签的 none 将支持::before和{ {1}}伪元素。然而,在实践中,我发现许多自动关闭标签都得到了全力支持。

除了定义为“内容”的问题之外,我们还可以考虑这样的事实:伪元素被表示为(虽然从技术上讲它们不是)应用它们的元素的DOM子元素。自闭标签不能有DOM子元素的事实似乎支持自闭标签不应该有伪元素的想法。

在我试图找到这个问题的答案时,我整理了一个小测试,以确定哪些自我关闭标签(我在他们想到的时候选择了一些标签)支持::after和{{1我在下面的代码片段中嵌入了该测试。我在不同的浏览器中获得截然不同的结果,并且几乎找不到一致性。

::before
::after

我对.test { display: inline; visibility: hidden; } span + *::after { visibility: visible; color: green; content: 'YES'; }<h3>Which Self-Closing Tags Support Pseudo Elements?</h3> <div><span>Text Input:</span> <input type="text" class="test"></div> <div><span>Checkbox Input:</span> <input type="checkbox" class="test"></div> <div><span>Radio Input:</span> <input type="radio" class="test"></div> <div><span>Submit Input:</span> <input type="submit" class="test"></div> <div><span>Reset Input:</span> <input type="reset" class="test"></div> <div><span>Button Input:</span> <input type="button" class="test"></div> <div><span>Image:</span> <img class="test"></div> <div><span>Line Break:</span> <br class="test"></div> <div><span>Horizontal Rule:</span> <hr class="test"></div> <div><span>Link:</span> <link class="test"></div> <div><span>Meta:</span> <meta class="test"></div>规范的解释是否错误?我对元素“内容”的定义是否不正确?我正在寻找具有权威性答案的答案,这些答案解释了“完美浏览器”如果要根据W3 ​​CSS规范实现这些伪元素以及自动关闭HTML标记将会做什么。


编辑:关于“替换元素”

我注意到Generated Content Specs底部有一行说:

  

请注意。此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互。这将在未来的规范中更详细地定义。

这可能与答案有关。根据{{​​3}},“替换元素”定义为:

  

其内容超出CSS格式模型范围的元素,例如图像,嵌入文档或小程序。例如,HTML IMG元素的内容通常被其“src”属性指定的图像替换。替换元素通常具有内在维度:固有宽度,固有高度和固有比率。

我在HTML规范中找不到替换元素的权威列表,但我可以很容易地看到大多数(或所有)自闭合标记符合该定义。我也不确定第一个音符中提到的“未来规范”是否已经完成。

1 个答案:

答案 0 :(得分:5)

根据CSS 2.1 spec

  

此规范未完全定义以下的交互:之前   和:替换后的元素(例如HTML中的IMG)。这将会   在未来的规范中更详细地定义。

current draft of Selectors Level 3只说

  

可以使用:: before和:: after伪元素来描述   在元素内容之前或之后生成内容。他们是   在CSS 2.1中解释

CSS 2.1定义了这样的替换元素:

  

其内容超出CSS格式范围的元素   模型,例如图像,嵌入文档或小程序。

     

CSS渲染模型中不考虑替换元素的内容。

根据MDN

  

典型的替换元素是<img><object><video>或表单   像<textarea><input>这样的元素。一些元素,如<audio>或   <canvas>仅在特定情况下被替换为元素。

因此,对替换元素使用:before:after会产生不可靠的结果。