Question

今天我发现了一些关于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;
}

Answer 1

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

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

Answer 2

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

在边缘，这背后的动机也可能包括作者可以使用通常不可见的样式元素的想法。例如，讨论CSS的页面可能希望显示自己的样式设置，如style元素, simply by making that element visible and suitably formatted, e.g.样式{display：block; white-space：pre}`。

设计不寻常的HTML标签！为什么这可能？

2 个答案: