html – 在应用伪元素之后,什么自我关闭的元素可以:: before和::
我特别感兴趣的是将:: before和:: after伪元素应用于自动关闭标签。这是这些伪元素的定义,根据
W3 Generated Content CSS Specifications:
基于此,似乎这些伪元素旨在修改元素的内容。据我了解(尽管我找不到权威的来源来支持这一点),“内容”或多或少被定义为“开始和结束标签之间的东西”;因此,我认为没有“内容”的元素(如HTML br标签)不应该支持:: before和:: after伪元素。 推断这一点,并且基于我对元素“内容”的定义的理解,我认为没有一个自我关闭标签将支持:: before和:: after伪元素。但实际上,我发现很多自我关闭的标签都有完全的支持。 除了定义为“内容”的问题之外,我们还可以考虑伪元素被表示为(尽管在技术上它们不是)应用它们的元素的DOM子元素。自我关闭标签不能拥有DOM子项的事实似乎支持自我关闭标签没有伪元素的想法。 在我试图找到这个问题的答案时,我把一个小的测试放在一起,以确定哪个自我关闭的标签(我们选择了几个他们想到)支持:: before和::之前,我已经在下面的代码片段中嵌入该测试。我在浏览器之间获得截然不同的结果,可以找到很少的一致性。 .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规范不正确吗?我的定义元素的“内容”不正确吗?我正在寻找具有权威性答案的答案,解释“完美的浏览器”将如何实现这些伪元素以及完全根据W3 ??CSS规范的自动关闭HTML标签。 编辑:关于“替换元素” 我在生成的内容规范的底部注意到一行:
这可能与答案有关。根据this spec,“替换元素”定义为:
我在HTML规范中找不到被替换的元素的权威列表,但是我可以很容易地看到大部分(或全部)自我关闭标签适合该定义。我也不知道第一个注释中提到的“未来规范”是否已经完成。 解决方法
根据
CSS 2.1 spec,
但current draft of Selectors Level 3只说
CSS 2.1定义了这样的替换元素:
据MDN,
因此,使用:之前或之后的替换元素会产生不可靠的结果。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |