替换元素列表 [英] List of Replaced Elements

问题描述

在此问题和其他在线位置中，通常引用具有特殊属性的替换元素"作为示例. <img>标签，<svg>标签等.但是，我试图设置某些元素的样式，这些元素是我无法控制的第三方库的输出，我想确切地知道哪些元素可以，不能在页面上使用:before和:after之类的伪元素.

即使关于替换元素的实际文档也没有"没有确切的清单.哪些元素被替换"了?

解决方案

您正在寻找错误的规格.

已替换元素是那些将在文档准备阶段替换其内容的元素.在进行替换之前，浏览器(或官方的用户代理)无法知道确切的尺寸.例如，img元素的内容将替换为定义为其src属性的图像.而且只有更换后，浏览器才能知道它的宽度和高度，然后尝试将其呈现在正确的位置.

请注意，取决于CSS中定义的content属性，甚至:before和:after都可以作为替换元素.

我已经看到很多时候人们对替换元素和 void元素感到困惑，因为我们最常使用的替换元素，例如img和input也是无效元素. 无效元素实际上是您应该寻找的.

引用 w3c规范:

void元素是其内容模型在任何情况下都不允许其包含内容的元素.虚空元素可以具有属性.

上面引述中的内容表示标记中的元素和伪元素，而不是呈现的文档.

以下是HTML中的void元素的完整列表:

• area，base，br，col，command，embed，hr，img，input，keygen，link，meta ，param，source，track，wbr

确定一个元素是否为空很容易-所有void元素都是自封闭的，所有非void元素都必须带有结束标记.

In this question and other places online, "replaced elements" that have special properties are referenced, usually citing examples of <img> tags, <svg> tags and the like. However, I'm trying to style some elements that are the output of a third-party library that I'm not in control of and I would like to know exactly what elements I can and can't use pseudo elements like :before and :after on.

Even the actual documentation on replaced elements doesn't have an exact list. Which elements are "replaced"?

解决方案

You are looking for the wrong spec.

Replaced elements are those, whose content will be replaced in the document preparation phase. Before the replacement happens, browser (or officially, user agent) could not know the exact dimensions. For example, the content of img element will be replaced with the image defined as its src attribute. And only after replaced, browser could know how wide and high it is, then try to render it in the right position.

Please note that, even :before and :after could be a replaced element, depending on the content property defined in CSS.

I've seen a lot of times people get confused with replaced elements and void elements, because the replaced elements we use the most, such as img and input, are also void elements. Void elements are actually what you should look for.

Quote from the w3c spec:

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The contents stated in above quote mean both elements and pseudo elements, in markup, not rendered document.

The following is a complete list of the void elements in HTML:

• area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

It's easy to determine whether an element is void or not - all void elements are self-closed, all non-void elements must have an end tag.

这篇关于替换元素列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！