css - last-of-type 不适用于 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>

在 Chrome 和 Firefox 中，最后一个 bar 显示为红色。然而，在 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 尚未提供该功能。自定义元素很好，只要您使用的浏览器支持该功能或其 polyfill。与任何其他有意偏离标准的元素一样，未知元素是明确的不良做法，可能导致意外行为，even if the spec requires browsers to treat them as first-class citizens for the purposes of the DOM and CSS ，其原因在 this answer 中有充分论证。 .