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元素匹配（仅限于此）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

在Microsoft Edge中也可以看到此行为。

这是否被承认作为Microsoft的错误？好吧，我还没有找到任何关于这种效果的错误报告。这是规范违规吗？这取决于您是否认为未知元素具有相同的元素类型（请注意，我是根据DOM而不是HTML来说话）。选择器和DOM规范都没有提到未知元素（可能是因为未知元素首先是不符合的）。

请注意，我一直在说＆＃34;未知元素＆＃34;因为在注册之前你实际上没有自定义元素（因此像所有其他标准元素一样使它成为已知的元素）。此外，IE不支持任何即将推出的标准所定义的自定义元素，Microsoft Edge还没有提供该功能。只要您使用支持该功能或其填充功能的浏览器，自定义元素就可以了。与任何其他故意偏离标准一样，未知元素是明确的不良做法，可能会导致意外行为，even if the spec requires browsers to treat them as first-class citizens for the purposes of the DOM and CSS，其原因在this answer中得到充分论证。

Answer 2

在应用bar时，last-of-type元素后面的自定义元素会让IE11 / Edge被抛出。

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

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

这似乎是一个错误，因为使用自定义元素应该没有问题：Proper way to apply CSS to HTML5 custom elements

Answer 3

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

然而，与所有好事一样，有一些警告。通过caniuse.com快速浏览浏览器对此类自定义元素的支持，显示除Chrome之外几乎所有主流浏览器都缺乏支持。事实上，W3C已将Custom Element Spec概述为工作草案（最后更新： 2016年7月21日），因此假设将会有更改。

如果您仍然对使用自定义元素感兴趣，我建议您使用Polymer之类的内容。根据他们的compatibility chart：

Polymer库是Web Components API之上的轻量级糖层。与典型的javascript框架不同，Polymer旨在利用Web平台本身的功能来构建组件。 Polymer使用的某些功能尚未在所有浏览器中本地支持。对于广泛的Web组件支持，Polymer使用webcomponents.org中的polyfill。它们重量轻，效果很好，并提供Polymer所需的功能支持。

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

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

3 个答案: