问题
.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>The last bar appears red in both cases in Chrome and Firefox. In IE11 and Edge, however, it doesn't work in the second scenario. What's going on?
回答1:
IE appears to be treating all unknown elements as being the same element type. If you remove the bar type selector, you'll see that IE matches the baz element (and only that):
.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>This behavior has also been seen in Microsoft Edge.
Has this been acknowledged as a bug by Microsoft? Well I haven't found any bug reports to this effect. Is this a spec violation? That depends on whether you consider unknown elements to be of the same element type (note that I'm speaking in terms of the DOM, not HTML). Neither the Selectors nor DOM specs make even so much as a mention of unknown elements (presumably because unknown elements are non-conforming in the first place).
Note that I keep saying "unknown element" because you don't actually have a custom element until you register it (thereby making it a known element like all other standard elements). Furthermore, IE does not support custom elements as defined by any of the upcoming standards, and Microsoft Edge hasn't shipped the feature yet. Custom elements are fine, as long as you're working with browsers that either support the feature or polyfills thereof. Unknown elements, as with any other intentional deviation from the standard, are unequivocally bad practice and can result in unexpected behavior, 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.
回答2:
Looks like IE11/Edge are being thrown off by a custom element coming after the bar element when applying last-of-type.
In your first example, your list ends with a span – a recognized HTML element.
In your second example, if you replace baz with a recognized element – span, textarea, etc. – it also works in IE11/Edge.
This appears to be a bug, as there should be no problem using custom elements: Proper way to apply CSS to HTML5 custom elements
回答3:
With HTML5, you can create custom elements. It is valid and it is legitimate. It is even part of the push behind projects such as the Polymer-Project. So in summary, yes you can use custom elements.
However, as with all good things, there are some caveats. A quick glance at browser support for such custom elements via caniuse.com shows a lack of support in almost all major browsers except Chrome. In fact, the W3C has the Custom Element Spec outlined as a Working Draft (Last Updated: 21 July 2016) so assume there will be changes to come.
If you're still interesting in using custom elements, I'd suggest using something like 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.
the library provides the necessary polyfills to make this functionality work in browsers that have not yet fully implemented the spec so you should be safe to use custom elements despite the relatively low amount of native support.
来源：https://stackoverflow.com/questions/38666233/last-of-type-doesnt-work-with-custom-elements-in-ie11-and-edge