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

 Ale__x小葡萄 发布于 2022-12-14 19:20

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

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

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

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

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

在我试图寻找这个问题的答案,我组建了一个小测试,以确定其自闭标签(我挑了其中的极少数,他们来考虑)的支持::before::after,我已经嵌入在测试中的一个片段下面.我在浏览器中获得了完全不同的结果,并且几乎找不到一致性.

.test {
  display: inline;
  visibility: hidden;
}

span + *::after {
  visibility: visible;
  color: green;
  content: 'YES';
}

Which Self-Closing Tags Support Pseudo Elements?

Text Input:
Checkbox Input:
Radio Input:
Submit Input:
Reset Input:
Button Input:
Image:
Line Break:
Horizontal Rule:
Link:
Meta:

是我的解释::before::after说明不正确?我对元素"内容"的定义是否不正确?我正在寻找具有权威答案的答案,这些答案解释了如果要完全根据W3 ​​CSS规范实现这些伪元素和自动关闭HTML标签,"完美浏览器"会做什么.


编辑:关于"替换元素"

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

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

这可能与答案有关.根据此规范,"替换元素"定义为:

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

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

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有