last-of-type 不适用于 IE11 和 Edge 中的自定义元素

.foo bar:last-of-type {
  background-color: red;
}

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <span>span</span>
</div>

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <baz>baz</baz>
</div>

最后bar在 Chrome 和 Firefox 中，这两种情况均显示为红色。然而，在 IE11 和 Edge 中，第二种情况不起作用。这是怎么回事？

IE 似乎将所有未知元素视为相同的元素类型。如果您删除bar类型选择器，你会看到 IE 匹配baz元素（仅此而已）：

.foo :last-of-type {
  background-color: red;
}

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <span>span</span>
</div>

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <baz>baz</baz>
</div>

Microsoft Edge 中也出现了这种行为。

这已经是承认作为微软的一个错误？嗯，我还没有发现任何与此相关的错误报告。这是否违反规范？这取决于您是否认为未知元素具有相同的元素类型（请注意，我指的是 DOM，而不是 HTML）。选择器和 DOM 规范都没有提及未知元素（大概是因为未知元素首先是不合格的）。

请注意，我一直说“未知元素”，因为在注册它之前，您实际上没有自定义元素（从而使其成为known像所有其他标准元素一样的元素）。此外，IE 不支持任何即将推出的标准定义的自定义元素，并且 Microsoft Edge 尚未提供该功能。只要您使用支持该功能或其填充的浏览器，自定义元素就可以了。与任何其他故意偏离标准的元素一样，未知元素显然是不好的做法，可能会导致意外的行为，即使规范要求浏览器出于 DOM 和 CSS 的目的将它们视为一等公民 https://www.w3.org/TR/html5/infrastructure.html#extensibility-0，其原因在这个答案 https://stackoverflow.com/questions/20353613/why-does-css-work-with-fake-elements/20353734#20353734.