首页 文章

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

提问于
浏览
18

我特别感兴趣的是了解 ::before::after 伪元素何时可以应用于自闭标签 . 根据W3 Generated Content CSS Specifications,这是这些伪元素的定义:

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

基于此,似乎这些伪元素旨在修改元素的内容 . 据我了解(虽然我找不到支持这个的权威来源),"content"或多或少被定义为"the stuff between the opening and closing tags";因此,我认为没有"content"的元素(例如HTML br 标签)不应该支持 ::before::after 伪元素 .

对此进行推断,并根据我对元素"content"定义的理解,我认为没有一个自闭标签会支持 ::before::after 伪元素 . 然而,在实践中,我发现许多自动关闭标签都有完全的支持 .

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

在我试图找到这个问题的答案时,我整理了一个小测试以确定哪些自我关闭的标签(我在他们想到的时候选择了一些它们)支持 ::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>

我对 ::before::after 规范的解释是否错误?我对元素"content"的定义是否不正确?我正在寻找具有权威答案的答案,这些答案解释了"perfect browser"如果要完全根据W3 CSS规范实现这些伪元素以及自动关闭HTML标记将会做什么 .


编辑:关于“替换元素”

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

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

这可能与答案有关 . 根据this spec,"replaced element"定义为:

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

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

1 回答

  • 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 将会产生不可靠的结果 .

相关问题