为什么CSS使用假元素？
在我的课堂上，我四处游玩，发现CSS使用了构成元素。
例：
imsocool { color:blue; } <imsocool>HELLO</imsocool>
当我的教授第一次看到我使用这个，他有点惊讶，化妆元素的工作，并build议我只是改变我所有的元素编号段。
为什么我的教授不想让我使用化妆元素？ 他们有效地工作。
另外，为什么他不知道构成元素存在和使用CSS。 他们不常见？
为什么CSS使用假元素？
（大多数）浏览器被devise为（在某种程度上）与将来添加到HTML的前向兼容。 无法识别的元素被分析到DOM中，但没有与它们相关联的语义或专门的默认呈现。
当一个新的元素被添加到规范中时，有时可以使用CSS，JavaScript和ARIA在旧版浏览器中提供相同的function（并且元素必须出现在DOM中，以便这些语言能够操作它们来添加该function）。
（虽然应该指出，目前正在开发定义一种用自定义元素来扩展HTML的方法，但是这项工作目前还处在开发的早期阶段，所以应该在成熟之前避免这种工作。）
为什么我的教授不想让我使用化妆元素？
- 它们不被HTML规范所允许
- 他们可能会与未来的同名标准元素相冲突
- 可能存在一个更适合于该任务的现有HTML元素
也; 为什么他不知道构成元素存在并与CSS一起工作？ 他们不常见？
是。 人们不使用他们，因为他们有上述问题。
TL; DR
- 自定义标记在HTML中无效。 这可能会导致呈现问题。
- 由于代码不可移植，使未来的开发变得更加困难。
- 有效的HTML提供了许多好处，如SEO，速度和专业性。
长答案
有一些与自定义标签代码更有用的参数。
但是，它导致无效的HTML。 哪一个不适合你的网站
有效的CSS / HTML |点 堆栈溢出
- 谷歌喜欢它，所以它是好的search引擎优化。
- 这使得您的网页更有可能在未经testing的浏览器中运行。
- 这让你看起来更专业（至less对一些开发者）
- 合规的浏览器可以渲染[有效的HTML更快]
- 它指出了你可能错过的一些晦涩的错误，这些错误会影响你可能没有testing过的东西，例如页面的代码页或语言集。
为什么要validation| W3C
- 作为debugging工具进行validation
- validation作为未来的质量检查
- validation简化了维护
- validation有助于教好的做法
- validation是专业的标志
亚大（又一个（不同的）答案）
编辑：请参阅BoltClock关于typesvs标记vs元素的评论。 我通常不担心语义，但他的评论是非常合适和信息丰富的。
虽然已经有一堆好的回复，但是你表示你的教授提示你发表这个问题，看起来你是（正式） 上学的 。 我想我会深入地阐述一下，不仅是CSS，还有Web浏览器的机制。 根据维基百科 ，“CSS是一种用于描述…用标记语言编写的文档的样式表语言”。 （我把重点放在了“a”上）注意，它不会说“用HTML编写”，更不用说特定版本的HTML。 CSS可以在HTML，XHTML，XML，SGML，XAML等等上使用。当然，你需要一些东西来呈现每一种这些文档types，这些文档也会应用样式。 根据定义，CSS不知道/理解/关心特定的标记语言标记。 因此，就HTML而言，标签可能是“无效的”，但CSS中没有“有效的”标签/元素/types的概念。
现代的视觉浏览器不是单一的程序。 它们是具有特定工作要做的不同“发动机”的混合物。 至less我能想到3个引擎，渲染引擎，CSS引擎和JavaScript引擎/ VM。 不知道parsing器是否是渲染引擎的一部分（反之亦然），或者是否是一个单独的引擎，但是你明白了。
无论是否使用可视化浏览器（ 其他浏览器已经解决了屏幕阅读器可能还有其他挑战来处理无效标签 ），格式化取决于parsing器是否在文档中留下“无效”标签，然后渲染引擎是否应用样式到那个标签 由于这会使开发/维护变得更加困难，CSS引擎不会被理解为“这是一个HTML文档，所以这里是有效的标签/元素/types列表”。 CSS引擎只需find标签/元素/types ，然后告诉渲染引擎“这里是你应该应用的样式”。 渲染引擎是否决定实际应用样式就是了。
这里是一个简单的方法来思考从引擎到引擎的基本stream程：parsing器 – > CSS – >渲染。 事实上，它更复杂，但对于初学者来说这已经足够了。
这个答案已经太长了，所以我会在那里结束。
未知元素被现代浏览器视为div 。 这就是他们工作的原因。 这是即将推出的HTML5标准的一部分，该标准引入了可添加新元素的模块化结构。
在较旧的浏览器（我认为IE7-），你可以应用一个JavaScript的伎俩之后，他们也将工作。
这是我在找一个例子时find的相关问题 。
这里是一个关于Javascript修复的问题 。 原来IE7确实不支持这些元素。
也; 为什么他不知道化妆标签存在和工作与CSS。 他们不常见？
是的，挺好的 但特别是：他们没有提供额外的目的。 他们是新的HTML5。 在早期版本的HTML中，未知标签是无效的。
而且，教师似乎在知识方面有时也有差距。 这可能是因为他们需要教给学生关于某个主题的基础知识，而且并不是真正的知道所有的细节，而是真正的最新的。 我曾经被拘留，因为老师认为我编了一个病毒，只是因为我可以用电脑播放音乐，使用GWBasic中的play命令。 （真实的故事，是的，很久以前）。 但无论什么原因，我认为不要使用客户要素的build议是合理的。
其实你可以使用自定义元素。 这是关于这个主题的W3C规范：
http://w3c.github.io/webcomponents/spec/custom/
这里是一个教程，解释如何使用它们：
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
正如@Quentin所指出的那样：这是开发初期的规范草案，它对元素名称可能是有限制的。
关于其他答案有几点或者只是说得不好，或者可能有点不正确。
FALSE（ish）：非标准HTML元素为“不允许”，“非法”或“无效”。
不必要。 他们是“不符合” 。 有什么不同？ 有些东西可能“不符合”，仍然是“允许的”。 W3C不会把HTML警察发送到你家，并把你带走。
W3C这样做是有原因的。 一致性和规范是由社区定义的。 如果您碰巧有一个较小的社区为了更具体的目的而使用HTML，并且他们都同意一些新的元素，他们可以将W3C所称的“其他适用的规范”作为它们的一部分。 （这显然是一个粗略的过分简化，但你明白了）
也就是说，严格的validation器会将您的非标准元素声明为“无效”。 但这是因为validation者的工作是确保符合其validation的任何规范，而不是确保浏览器或使用的 “合法性”。
FALSE（ish）：非标准的HTML元素将导致呈现问题
可能，但不太可能。 （将“will”replace为“might”）这将导致呈现问题的唯一方式是，如果您的自定义元素与另一个规范冲突，例如更改HTML规范或另一个规范在同一系统SVG，math或者自定义的东西）。
事实上， CSS可以devise非标准标签的原因是HTML规范明确规定 ：
用户代理必须将他们不理解的元素和属性视为语义中立; 把它们留在DOM（对于DOM处理器），并根据CSS（对于CSS处理器）对它们进行样式化，但是不能从它们推断任何含义
注意：如果你想使用自定义标签，稍后记住对HTML规范的更改可能会使你的风格变得模糊，所以要做好准备。 然而，W3C实现<imsocool>标签的可能性不大。
非标准的标签和JavaScript（通过DOM）
你可以使用JavaScript来访问和改变自定义元素的原因是规范甚至会谈到如何在DOM中处理它们 ，这是一个（非常糟糕的）API，允许你操纵页面上的元素。
HTMLUnknownElement接口必须用于本规范（或其他适用规范）未定义的HTML元素。
TL; DR：符合规范是为了沟通和安全的目的。 除了validation者之外 ，不合格仍然被允许，唯一的目的是强制符合，但是其使用是可选的。
例如：
var wee = document.createElement('wee'); console.log(wee.toString()); //[object HTMLUnknownElement]
（我敢肯定这会引起火焰，但我的2美分）
根据规格：
CSS
typesselect器是使用CSS限定名的语法编写的文档语言元素types的名称
我以为这被称为元素select器，但显然它实际上是typesselect器。 规范继续谈论CSS qualified names ，并不限制名称实际上是什么。 也就是说，只要typesselect符匹配CSS限定的名称语法，它在技术上是正确的CSS，并将匹配文档中的元素。 对特定规范中不存在的元素没有CSS限制 – HTML或其他。
HTML
没有任何官方限制在文档中包含任何标签。 然而，文件确实说
作者不得将元素，属性或属性值用于除适当的预期语义目的之外的目的，否则会阻止软件正确处理页面。
它后来说
作者不得使用本规范或其他适用规范所不允许的元素，属性或属性值，因为这样做会使语言在未来得到扩展变得非常困难。
我不确定具体在哪里或者说规范是否允许使用未知元素，但是它确实为无法识别的元素讨论了HTMLUnknownElement接口。 有些浏览器甚至可能不会识别当前规范中的元素（IE8想到）。
虽然有自定义元素的草稿 ，但是我怀疑它是在任何地方实现的。
这可能与html5，但你需要考虑到旧的浏览器。
如果你决定使用它们，那么一定要评论你的HTML！ 有些人可能会遇到一些麻烦，因此评论可以为他们节省大量的时间。
像这样的东西，
<!-- Custom tags in use, refer to their CSS for aid -->
当你制作自己的自定义标签/元素时，旧版本的浏览器将不会知道那些HTML5元素，比如nav / section 。
如果你对这个概念感兴趣的话，我build议你做正确的做法。
入门
自定义元素允许Web开发人员定义新的HTML元素types。 该规范是Web Components下的几个新API原语之一，但它可能是最重要的。 没有通过自定义元素解锁的function，Web组件不存在：
定义新的HTML / DOM元素创build从其他元素扩展的元素将自定义function逻辑上捆绑到一个标记中扩展现有DOM元素的API
有很多你可以用它做，它确实使你的脚本美丽，因为这篇文章喜欢把它。 自定义元素定义HTML中的新元素 。
所以让我们回顾一下，
优点
-
非常优雅，易于阅读。
-
很高兴看不到这么多
divs。 ：p -
允许代码具有独特的感觉
缺点
-
较旧的浏览器支持是一个强有力的考虑事项。
-
如果他们不了解自定义标签，其他开发者可能不知道该怎么做。 （向他们解释或添加评论通知他们）
-
最后要考虑一点，但我不确定，是块和内联元素。 通过使用自定义标签，你最终会写更多的CSS，因为自定义标签不会有默认的一面。
这个select完全取决于你，你应该根据项目的要求。
更新1/2/2014
这里是一个非常有用的文章，我发现并认为我会分享， 自定义元素 。
了解技术为什么自定义元素？ 自定义元素让作者定义自己的元素。 作者将JavaScript代码与自定义标签名称相关联，然后像使用任何标准标签一样使用这些自定义标签名称。
例如，在注册一个特殊types的超级button之后，使用超级button就像这样：
自定义元素仍然是元素。 我们可以像任何标准或今天一样轻松地创build，使用，操作和编写它们。
这似乎是一个非常好的库，但我注意到它没有通过窗口的构build状态。 我相信这也是在alpha前，所以我会在开发的时候关注这个。
为什么他不希望你使用它们？ 它们不是普通的，也不是HTML5标准的一部分。 从技术上讲，他们是不允许的。 他们是一个黑客。
虽然我自己喜欢。 您可能对XHTML5感兴趣。 它允许您定义自己的标签并将其用作标准的一部分。
另外，正如其他人指出的那样，它们是无效的，因此不能携带。
为什么他不知道他们存在？ 我不知道，除了他们不常见。 可能他只是不知道你可以。
制作好的标签很less被使用，因为它们不太可能在当前的每个浏览器和每个未来的浏览器中可靠地工作。
浏览器不得不将HTML代码parsing成它所知道的元素，将构成的标签转换成其他东西来适应文档对象模型（DOM）。 由于Web标准并不包括如何处理标准之外的所有内容，Web浏览器倾向于以不同的方式处理非标准代码。
Web开发是非常棘手的一堆不同的浏览器有自己的怪癖，而不增加另一个不确定因素。 最好的办法是坚持一些标准，那就是浏览器厂商试图遵循的东西，这样才能有最好的机会去实际工作。
我认为，制作标签可能比带有ID的标识（通常是一些文本块）更加混乱或不清楚。 我们都知道一个ID是一个段落，但谁知道什么化妆标签的目的？ 至less这是我的想法。 :)因此，这是更多的风格/清晰度问题比function之一。
其他人已经做出了卓越的观点，但值得注意的是，如果你看一下像AngularJS这样的框架，那么自定义元素和属性就是非常有效的例子。 这些不仅为XML提供了更好的语义，而且还可以为网页提供行为，外观和感觉。
CSS是一种可用于呈现XML文档的样式表语言，而不仅仅是（X）HTML文档。 制作标签的片段可以是合法XML文档的一部分; 如果你把它放在一个单独的根元素中，这将是一个。 可能你已经有了一个<html> ...</html>吗？ 任何当前浏览器都可以显示XML文档。
当然这不是一个很好的XML文档，它缺less一个语法和一个XML声明。 如果您使用HTML声明标头（而且可能是一个发送正确的MIMEtypes的服务器configuration），它将是非法的HTML。
（X）HTML比普通XML有优点，因为元素具有在网页表示的上下文中有用的语义。 工具可以用这个语义工作，其他开发人员知道这个意思，它不太容易出错，更好阅读。
但在其他情况下，最好使用CSS和XML和/或XSLT来进行演示。 这是你做的。 由于这不是你的任务，你不知道你在做什么，HTML / CSS是大多数情况下你应该坚持在你的情况下更好的方式。
您应该为文档添加（X）HTML标题，以便工具可以为您提供有意义的错误消息。
…我只是简单地将所有制作的标签都改成带ID的段落。
实际上，我对他如何正确处理这个问题的build议提出了质疑。
-
一个
<p>标签是为段落。 我看到人们一直在使用它，而不是一个div – 仅仅是为了间距的目的，或者因为它看起来温和。 如果不是一个段落，请不要使用它。 -
你不需要或想要坚持ID的一切，除非你需要明确的目标（例如用JavaScript）。 使用类或只是一个直接的div。
从早期的CSS被devise为标记不可知的，所以它可以使用任何标记语言产生树一样的DOM结构（例如SVG）。 任何符合name token生产的标签在CSS中都是完全有效的。 所以你的问题是关于HTML而不是CSS本身。
具有自定义标签的元素受HTML5规范支持。 HTML5标准化了未知元素在DOM中的parsing方式。 因此，HTML5是第一个严格意义上自定义元素的HTML规范。 您只需要在文档中使用HTML5 doctype <!DOCTYPE html> 。
自定义标签名称本身…
这个文档http://www.w3.org/TR/custom-elements/推荐你select包含至less一个' – '（短划线）符号的自定义标签。 这样他们将不会与未来的HTML元素冲突。 所以你最好把你的文档改成这样：
<style> so-cool { color:blue; } </style> <body> <so-cool>HELLO</so-cool> </body>
显然没有人提到它，所以我会的。
这是浏览器大战的副产品。
Back in the 1990's when the Internet was first starting to go mainstream, competition incrased in the browser market. To stay competitive and draw users, some browsers (most notably Internet Explorer) tried to be helpful and “user-friendly” by attempting to figure out what page designers meant and thus allowed markup that are incorrect (eg, <b><i>foobar</b></i> would correctly render as bold-italics).
This made sense to some degree because if one browser kept complaining about syntax errors while another ate anything you threw at it and spit out a (more-or-less) correct result, then people would naturally flock to the latter.
While many thought the browser wars were over, a new war between browser vendors has reignited in the past few years since Chrome was released, Apple started growing again and pushing Safari, and IE lost its dominance. (You could call it a “cold war” due to the perceived cooperation and support of standards by browser vendors.) Therefore, it is not a surprise that even contemporary browsers which supposedly conform strictly to web standards actually try to be “clever” and allow standard-breaking behavior such as this in order to try to gain an advantage as before.
Unfortunately, this permissive behavior led to a massive ( some might even say cancerous) growth of poorly marked up webpages. Because IE was the most lenient and popular browser, and due to Microsoft's continued flouting of standards, IE became infamous for encouraging and promoting bad design and propagating and perpetuating broken pages.
You may be able to get away with using quirks and exploits like that on some browsers for now, but other than the occasional puzzle or game or something, you should always stick to web standards when creating web pages and sites to ensure they display correctly and avoid them becoming broken (possibly completely ignored) with a browser update.
While browsers will generally relate CSS to HTML tags regardless of whether or not they are valid, you should ABSOLUTELY NOT do this.
There is technically nothing wrong with this from a CSS perspective. However, using made up tags is something you should NEVER do in HTML.
HTML is a markup language, which means that each tag corresponds to a specific type of information.
Your made up tags don't correspond to any type of information. This will create problems from web crawlers, such as Google.
Read more information on the importance of correct markup .
编辑
Divs refer to groups of multiple related elements, meant to be displayed in block form and can be manipulated as such.
Spans refer to elements that are to be styled differenly than the context they are currently in and are meant to be displayed inline, not as a block. An example is if a few words in a sentence needs to be all caps.
Custom tags do not correlate to any standards and thus span/div should be used with class/ID properties instead.
There are very specific exemptions to this, such as Angular JS
Although CSS has a thing called a "tag selector," it doesn't actually know what a tag is. That's left for the document's language to define. CSS was designed to be used not just with HTML, but also with XML, where (assuming you're not using a DTD or other validation scheme) the tags can be just about anything. You could use it with other languages too, though you would need to come up with your own semantics for exactly what things like "tags" and "attributes" correspond to.
Browsers generally apply CSS to unknown tags in HTML, because this is considered better than breaking completely: at least they can display something. But it is very bad practice to use "fake" tags deliberately. One reason for this is that new tags do get defined from time to time, and if one is defined that looks sort of like your fake tag but doesn't quite work the same way, that can cause problems with your site on new browsers.
