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>

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

Answer 1

看起来 IE11/Edge 在应用 last-of-type 时被 bar 元素后面的自定义元素抛弃了。

在您的第一个示例中，您的列表以 span 结尾——一个可识别的 HTML 元素。

在您的第二个示例中，如果您将 baz 替换为可识别的元素 – span、textarea 等 – 它也适用于 IE11/Edge.

这似乎是一个错误，因为使用自定义元素应该没有问题：

Answer 2

使用 HTML5，您可以创建自定义元素。它是有效的，也是合法的。它甚至是 Polymer-Project 等项目的推动力的一部分。所以总而言之，是的，你可以使用自定义元素。

但是，与所有美好事物一样，也有一些注意事项。通过 caniuse.com shows a lack of support in almost all major browsers except Chrome. In fact, the W3C has the Custom Element Spec 概述为工作草案（ 上次更新： 2016 年 7 月 21 日）快速浏览浏览器对此类自定义元素的支持，因此假设会有更改。

如果您仍然对使用自定义元素感兴趣，我建议您使用 Polymer. According to their compatibility chart:

The Polymer library is a lightweight sugaring layer on top of the Web Components APIs. Unlike a typical javascript framework, Polymer is designed to leverage features baked into the web platform itself to let you build components. Some features used by Polymer are not (yet) supported natively in all browsers. For broad web components support, Polymer uses the polyfills from webcomponents.org. They're lightweight, work well, and provide the feature support Polymer requires.

该库提供了必要的 polyfill，使此功能在尚未完全实现规范的浏览器中工作，因此尽管本机支持相对较少，但您应该可以安全地使用自定义元素。

Answer 3

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 规范甚至都没有提到未知元素（大概是因为未知元素首先是不合格的）。

请注意，我一直在说 "unknown element"，因为在您注册自定义元素之前，您实际上并没有自定义元素（从而使它像所有其他标准一样成为已知元素元素）。此外，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, and the reasons for this are well argued in this answer。

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

last-of-type doesn't work with custom elements in IE11 and Edge

html

css

css-selectors

internet-explorer-11

microsoft-edge