【问题标题】：How to write css for that?如何为此编写css？
【发布时间】：2011-10-12 18:30:21
【问题描述】：

我正在制作类似的 css

   <head><style type="text/css">span.blue{color:blue;}</style>;

并像 html 一样使用它

 <html>I am <span class=blue>red</span></html>;

现在我想避免在 html 代码中使用 span 和 class 字，有没有可能像

<html>I am <blue>red</blue></html>;

【问题讨论】：

不要为什么要使用这么多引号以及为什么要转义其中的一部分。那不是 HTML（除了你缺少 body 标签）。但不，这是不可能的。 HTML 有一组定义良好的元素。你不能定义你自己的。
我知道有可能但不知道怎么办？
先把你的问题说清楚。你想达到什么目标？我认为你想要的是不可能的。
我要定制标签。
是的，有可能。不，这不是一个好主意：它会在某些浏览器中中断，并且违背了良好的做法。你已经有了一个非常好的方法来做到这一点；为什么你需要打破所有的标准？

标签： html css

【解决方案1】：

当然，如果你愿意，你可以这样做：http://jsbin.com/uhiyoj

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<style>
blue {
    color: blue  
}
</style>

</head>
<body>

    <blue>Hello World</blue>

</body>
</html>

但是，这是一个可怕的想法。

只要坚持<span class="blue">。

【讨论】：

它适用于除 IE8 及更低版本之外的所有浏览器。如果您需要在这些浏览器中使用此功能，则需要使用 html5shiv，然后将每个自定义元素添加到内部元素列表中：abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|subline|summary|time|video |blue。
我见过的最糟糕的想法 - 然而，它确实适用于 IE、FF 和 Chrome
好的..对不起，我在微软资源管理器控件中尝试了这段代码，但它在 mozzila 和 chorme 中工作时不起作用。
我已经解释了in a previous comment。如果您想要一个非常非常简单的修复程序，请使用<script>document.createElement('blue');</script>，请参阅：jsbin.com/uhiyoj/2。但是，当您打印页面时，这在 IE 中不起作用。

【解决方案2】：

您正在寻找的是自定义 html 标签。为了使用自定义 html 标签，试试这个link 希望对你有帮助

【讨论】：

【解决方案3】：

您可以避免使用 class 和 span 标签 - 但不能自己编造。

类 - 使用相对选择器
span - 使用 strong/em 代替 - 它们是为这类事情而存在的

试试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
<style type="text/css">
body div strong {color:blue;}
</style>
</head>
<body><div>
I am <strong>red</strong>ok.
</div>

</body>
</html>

【讨论】：

【解决方案4】：

首先，您的 HTML 无效且未声明文档类型。首先，您的内容必须介于 <body> 之间。

其次，你也许可以摆脱 blue:{ color:blue} 在您的风格中并定义您的蓝色标签但它会使你的 css 和你的 html 完全无效，并且它有 0% 的机会跨浏览器兼容。

【讨论】：