最后类型不适用于IE11和Edge中的自定义元素

Question

.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中，它在第二种情况下不起作用。这是怎么回事？

Answer 1

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中也可以看到此行为。

Microsoft 是否已将其确认为错误？好吧，我还没有发现任何有关此问题的错误报告。这是否违反规范？这取决于您是否认为未知元素具有相同的元素类型（请注意，我是在使用DOM而不是HTML来表示）。选择器和DOM规范都没有提到未知元素（大概是因为未知元素首先是不合格的）。

请注意，我一直说“未知元素”是因为在注册之前您实际上没有一个自定义元素（因此使它像所有其他标准元素一样成为已知元素）。此外，IE不支持任何即将到来的标准所定义的自定义元素，并且Microsoft Edge尚未提供该功能。只要您使用支持功能或功能的自定义元素，就可以使用自定义元素。未知元素（与任何其他有意偏离标准的元素一样）无疑是错误的做法，并且会导致意外行为，即使该规范要求浏览器出于DOM和CSS的目的将浏览器视为一流公民，其原因也是如此。为此，在这个答案中有充分的论据。