样式化不寻常的 html 标签！为什么这可能？答案

【问题标题】：Styling unusual html tags! Why is this possible?样式化不寻常的 html 标签！为什么这可能？
【发布时间】：2014-04-10 13:22:21
【问题描述】：

今天我发现CSS 的工作方式有些奇怪。
基本上我尝试将一些样式应用于head、title 和script。

我很困惑地发现这件事奏效了，所以我显然是想弄清楚为什么会有这样的事情发生。

我得到了一些代码：here。

我什至在本地项目上尝试过这个东西，它的行为是一样的，所以它与 plunker 无关。

有什么线索吗？

HTML 标记：

<head>
    <title>Am I styled?</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script>console.log("Stylish!");</script>
</head>

CSS：

title {
  color: red;
  display: block;
  font-size: 30px;
}

head {
  display: block;
  border: 3px solid black;
}

script {
  display: block;
  color: green;
}

【问题讨论】：

您不应该仅仅依靠第三方网站来托管您的代码。也在这里发布一个示例
这是旧消息，但与contenteditable: jsfiddle.net/HfcP4/show 一起创造了一些有趣的时光（编辑css 以设置样式，enter 插入<br>so 保持一行）
@xec 这可能是旧闻，但它仍然很棒：D

标签： html css stylesheet frontend

【解决方案1】：

这是可能的，因为没有充分的理由让它不可能。

为了使它不可能，必须有特殊的大小写来区别对待元素。这意味着在处理 HTML 和 CSS 的浏览器以及 HTML 和 CSS 规范中都需要更多的工作和更多的复杂性（因此有更多的机会出现错误）。

【讨论】：

IE8- 没有相同的行为（..可预测的，我知道）。这种行为不应该在某个规范中吗？
@gion_13 — IE8 有问题。这些规范是 HTML 和 CSS 规范，它们并没有说任何元素都应该被忽略以进行样式设置。
@gion_13 whatwg 制定了一些渲染规范，这是我找到的最接近的：whatwg.org/specs/web-apps/current-work/multipage/… ... 请注意 <noscript> 应该忽略显示它的 css 规则（如果启用了脚本）和确实：jsfiddle.net/HfcP4/1 确实如此——但就<style> 而言，它只是被默认（用户代理）css 隐藏。
@xec 感谢您的链接，我想我就像 10 年前一样只有身体被渲染！

【解决方案2】：

这是可能的，因为已经开发出浏览器来更统一地处理 HTML 元素。例如，“不寻常的样式”不适用于 IE 8 和更早版本。在现代浏览器中，渲染更系统地基于 CSS 概念；所有元素都有所有的 CSS 属性，display 属性的值控制着渲染元素的整体方式。对于head 及其子代，默认值为display: none。如您所见，这可以被覆盖。

顺便说一句，这背后的动机可能还包括作者可以利用通常不可见的样式元素的想法。例如，讨论 CSS 的页面可能希望显示自己的样式设置，如 style element, simply by making that element visible and suitably formatted, e.g.style { display: block;空白：pre }`。

【讨论】：