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

Question

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

19

在HTML的head标签中使用两个<style>标签是否有效?

例如，我正在尝试为没有添加外部样式表的电子邮件客户端编写HTML页面。由于我们的模板系统的工作方式，使用两个<style>标签更容易实现。

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

与其这样...

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

如果选项2是唯一的方法，我会采用它，但由于各种原因，选项1更适合我们的框架代码。

- benstpierre

3

你的意思是什么，是代替……的意思？ - Tom

@JonTaylor - 它说：“使用两个标签而不是HTML头标签是否有效？” - Tom

1

@Tom认为他的意思是在里面而不是代替。哈哈，是啊，我删除了我的其他评论 :) - Jon Taylor

1

@WesleyMurch，你说的“问题似乎很随意”是什么意思？我也是搜索同样的内容才来到这里的，并不是随意的。除了HEAD或BODY之外，还有像TITLE、BASE等单例元素，而CSS中的“级联”本身并不意味着STYLE元素的多重性。事实上，STYLE在BODY中是不允许的，而这种明显的限制（由于某种原因被每个浏览器忽略）可能会促使某人再次检查HEAD中STYLE的多重性。注意：您可以在任何地方使用它们与其有效无关。 - Sz.

如果使用JavaScript通过innerHTML插入一堆覆盖样式，那么拥有多个<style>元素的能力是非常有用的 - 就像这样。因此，允许这种情况是很好的。 - Mentalist

3个回答

11

没有任何答案引用任何来源，因此提问者不能确定。（请注意，“CSS”中的“级联”部分以及浏览器容忍许多STYLE元素这一事实并未证明任何事情；例如，即使规范认为除非使用了scoped属性（尽管有效），否则将STYLE元素包含在BODY中也被视为异端邪说，但浏览器也会容忍它们（顺带一提，谢天谢地！）...）

以下是当前HTML规范今天（2017年2月8日）的内容：

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

如果未指定作用域属性：在期望元数据内容的位置。

如果未指定作用域属性：在head元素的子noscript元素中。

如果已指定作用域属性：在预期流内容的位置，但在其他流内容（除了其他样式元素和元素间空格）之前。

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

- Sz.

1

哎呦，Google 把我带到这里了。看了这个回答，我想快速点个赞来感谢添加来源...但失败了...WTF，我读了错误信息，上面写着：“你不能为自己的帖子投票。”不是吧，我才意识到这位分享链接的好心人其实是我两年前的自己！ :-D - Sz.

2

是的，在特定区域使用互联网时，它并不是很大。我在搜索时也会遇到自己过去的帖子。实际上，由于我的记忆力很差，我经常为了未来的自己发布问题和答案，预计我将忘记如何做某事。最糟糕的情况就是因为没有记录解决方案而不得不重新跟踪已经解决过的问题。:-p - Mentalist

7

是的，这完全有效。CSS 代表 "层叠样式表"（也就是说，彼此层叠）。多个 <style> 标签允许你包含多个样式表或多个样式声明。

- Roddy of the Frozen Peas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- knittl · Accepted Answer

在 <head> 和 </head> 标签之间有多个样式元素是完全可以的。你可以同时使用任意多个，包括 <link> 或 <script> 元素。