为什么CSS使用假元素?

在我的课上，我玩了一下，发现CSS与虚构的元素一起工作。

例子:

imsocool { 颜色:蓝色; ｝ < imsocool >你好< / imsocool >

当我的教授第一次看到我使用它时，他有点惊讶于虚构元素的工作，并建议我简单地将所有的虚构元素更改为带有ID的段落。

为什么我的教授不让我使用合成元素?他们工作效率很高。

另外，为什么他不知道存在虚构元素，并与CSS一起工作。它们不常见吗?

当前回答

虽然CSS有一个叫做“标签选择器”的东西，但它实际上并不知道标签是什么。这将留给文档的语言来定义。CSS被设计成不仅可以与HTML一起使用，还可以与XML一起使用，其中(假设您没有使用DTD或其他验证方案)标签可以是任何东西。您也可以将它用于其他语言，尽管您需要提出自己的语义，以明确“标签”和“属性”对应的内容。

浏览器通常将CSS应用于HTML中的未知标记，因为这被认为比完全破坏要好:至少它们可以显示一些东西。但故意使用“假”标签是非常糟糕的做法。这样做的一个原因是，新标签确实会时不时地定义，如果一个定义看起来有点像你的假标签，但不完全以相同的方式工作，这可能会导致你的网站在新浏览器上出现问题。

2013-12-05 18:37:49

其他回答

人们很少使用自制的标记，因为它们不太可能在当前的每个浏览器和未来的每个浏览器中都可靠地工作。

浏览器必须将HTML代码解析为它所知道的元素，然后将生成的标记转换为适合文档对象模型(DOM)的其他内容。由于web标准没有涵盖如何处理标准之外的所有内容，web浏览器倾向于以不同的方式处理非标准代码。

在不增加不确定性元素的情况下，使用一堆不同的浏览器进行Web开发已经足够棘手了，这些浏览器都有自己的怪癖。最好的办法是坚持那些标准中的东西，那是浏览器供应商试图遵循的，所以它有最好的机会实际工作。

2013-12-03 14:25:05

我认为编造的标签可能比带有id的p更令人困惑或不清楚(通常是一些文本块)。我们都知道带ID的p是一个段落，但是谁知道创建的标记是用来干什么的呢?至少我是这么想的。:)因此，这更多的是一个风格/清晰度问题，而不是功能问题。

2013-12-03 14:21:37

YADA(又一个(不同的)答案)

编辑:请参阅下面BoltClock关于类型、标签和元素的评论。我通常不担心语义学，但他的评论非常合适，信息量很大。

Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.

现代的可视化浏览器不是单一的程序。它们是不同“引擎”的混合体，各自承担着特定的任务。至少我能想到3个引擎，渲染引擎，CSS引擎和javascript引擎/VM。不确定解析器是否是呈现引擎的一部分(反之亦然)，或者它是否是一个单独的引擎，但您可以理解。

Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.

这里有一个简单的方法来考虑从引擎到引擎的基本流程:解析器-> CSS ->渲染。实际上，它要复杂得多，但这对于初学者来说已经足够好了。

这个答案已经太长了，所以我就到此为止。

2013-12-03 16:38:29

虽然浏览器通常会将CSS与HTML标记关联起来，不管它们是否有效，但你绝对不应该这样做。

从CSS的角度来看，这在技术上没有什么问题。然而，在HTML中绝对不应该使用编造的标签。

HTML是一种标记语言，这意味着每个标记对应于特定类型的信息。

您创建的标记不对应于任何类型的信息。这将产生来自网络爬虫的问题，如谷歌。

阅读有关正确标记重要性的更多信息。

Edit

div指的是多个相关元素的组，意味着以块形式显示，并可以这样操作。

span指的是与它们当前所在的上下文样式不同的元素，它们应该内联显示，而不是作为块显示。一个例子是句子中的几个单词需要全部大写。

自定义标记与任何标准都不相关，因此span/div应该与class/ID属性一起使用。

有一些非常特殊的例外情况，比如Angular JS

2013-12-03 16:19:00

从早期开始，CSS就被设计为与标记无关的，因此它可以与任何标记语言一起使用，生成类似DOM结构的树(例如SVG)。任何符合名称令牌生成的标记在CSS中都是完全有效的。所以你的问题是关于HTML而不是CSS本身。

HTML5规范支持带有自定义标记的元素。HTML5标准化了DOM中解析未知元素的方式。所以严格来说，HTML5是第一个支持自定义元素的HTML规范。你只需要使用HTML5 doctype <!文档中的DOCTYPE html>。

至于自定义标签名称本身……

本文档http://www.w3.org/TR/custom-elements/建议您选择的自定义标记至少包含一个“-”(破折号)符号。这样它们就不会与将来的HTML元素冲突。因此，你最好把你的文档修改成这样:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body>

2013-12-07 23:12:19

为什么CSS使用假元素?

推荐文章

最新文章

标签