在 HTML <head> 标签中有两个 <style> 元素是有效的 HTML 吗？答案

【问题标题】：Is it valid HTML to have two <style> elements inside your HTML <head> tag?在 HTML <head> 标签中有两个 <style> 元素是有效的 HTML 吗？
【发布时间】：2012-07-25 12:15:56
【问题描述】：

在 HTML 头标签内有两个 <style> 标签是否有效？

例如，我正在尝试为电子邮件客户端编写一个没有添加外部样式表的 HTML 页面。由于我们的模板系统的工作方式，我们更容易拥有

<head>
 <style>
  .someStyle{}
 </style>
 <style>
  .someOtherStyle{}
 </style>
</head>

而不是这个...

<head>
 <style>
  .someStyle{}
  .someOtherStyle{}
 </style>
</head>

如果选项 2 是这样做的唯一方法，我会这样做，但出于各种原因，选项 1 更适合我们的框架代码。

【问题讨论】：

你是什么意思而不是..？
@JonTaylor - 它说“有两个标签而不是 HTML 头标签是否有效？”
@Tom 认为他的意思是里面不是而不是。哈哈，是的，我删除了我的其他评论:)
@WesleyMurch，您所说的“问题似乎是随机的”是什么意思？我只是来这里谷歌搜索同样的事情，并没有随意做。 :) 有单例元素（除了 HEAD 或 BODY），如 TITLE、BASE 等，CSS 中的“级联”本身并不意味着 STYLE 元素的多样性。事实上，在 BODY 中不允许使用 STYLE，并且这种公然的限制（由于某种原因被每个浏览器忽略）可能会促使人们仔细检查 HEAD 中 STYLE 的多样性。注意：您可以在任何地方使用它们中的任何一个这一事实与它是否有效无关。
拥有多个<style> 元素的能力在使用innerHTML 使用JavaScript 来放入一堆覆盖样式时非常有用 - like this。所以很高兴它被允许。

标签： html css styles

【解决方案1】：

在<head> 和</head> 标签之间有多个样式元素是非常好的。您可以拥有任意数量的元素，以及 <link> 或 <script> 元素。

【讨论】：

顶部样式标签是否具有更高的偏好？
@Juke 所有样式标签将被连接在一起，然后应用 CSS 的标准规则关于特异性和级联。

【解决方案2】：

没有一个答案引用任何来源，因此 OP 无法确定。（请注意，“CSS”的“级联”部分和浏览器容忍许多 STYLE 元素的事实都不能证明任何事情；例如，它们也容忍 BODY 中的 STYLE 元素（感谢上帝，顺便说一句！），甚至尽管规范认为这是异端邪说，除非使用scoped attr.，尽管它是有效的，但浏览器基本上不支持它......）

这是the current HTML spec 今天（2017-02-08）所说的话：

可以使用此元素的上下文：

如果没有 scoped 属性：需要元数据内容。

如果没有 scoped 属性：在作为 head 元素的子元素的 noscript 元素中。

如果存在范围属性：预期流内容的位置，但在除其他样式之外的任何其他流内容之前元素和元素间空白。

这实际上意味着原始问题的答案确实是：是。 :)

【讨论】：

Ehh-hehh，Google 把我丢到这里，阅读了这个答案，并想快速点赞以添加来源......但它失败了...... WTF，我读到了错误消息，上面写着：“你不能为自己的帖子投票。”...不，我才意识到这个有链接的好人实际上是我〜2年前！... :-D
是的，当您住在特定区域时，网络并没有那么大。我也在搜索时遇到了我自己过去的帖子。事实上，由于我的记忆力很差，我经常为未来的自己发布问题和答案，以为我会忘记如何做某事。没有什么比因为没有记录解决方案而不得不重新跟踪您之前已经破解的问题的步骤更糟糕的了。 :-p

【解决方案3】：

是的，这是完全有效的。 CSS 代表“级联样式表”（如在彼此之上分层。）多个<style> 标签允许您包含多个样式表或多个样式声明。

【讨论】：