最後的類型不與IE11自定義元素和邊緣

.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中，它在第二種情況下不起作用。這是怎麼回事？

來源

2016-07-29 adamdport

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>

這種行爲也已在微軟邊緣可見。

這是承認作爲微軟的錯誤嗎？那麼我還沒有發現任何錯誤報告來達到這個效果。這是違反規範嗎？這取決於您是否將未知元素視爲相同的元素類型（請注意，我使用的是DOM而不是HTML）。 Selectors和DOM規範都沒有提到未知元素（可能是因爲未知元素首先不符合要求）。

請注意，我一直在說「未知元素」，因爲直到您註冊爲止，您實際上並沒有自定義元素（從而使其像所有其他標準元素一樣爲已知元素）。此外，IE不支持任何即將推出的標準定義的自定義元素，而且Microsoft Edge尚未發佈該功能。自定義元素沒有問題，只要您使用的瀏覽器支持該功能或其多邊形填充。與其他任何有意偏離標準的元素一樣，未知元素是明顯不好的做法，可能會導致意想不到的行爲，其原因在this answer中有很好的論述。

來源

2016-07-30 03:00:59 BoltClock

我認爲瀏覽器未知所有*元素，直到它們通過默認樣式表引入。但是，通過在作者樣式中簡單地「註冊」一個自定義元素，這足以讓它起作用。我在這裏寫了：http://stackoverflow.com/q/36380449/3597276 –

創建AngularJS指令時，未知元素*是*標準。這是一個無賴。 – adamdport

@Michael_B：瀏覽器對元素的知識是由其DOM實現控制的，而不是由任何樣式表控制的。 CSS只是DOM的消費者。這就是爲什麼[「CSS類」是一個用詞不當]的原因（http://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes/18701712#18701712）。 – BoltClock

看起來應用last-of-type時，IE11/Edge正在被bar元素後面的自定義元素拋棄。

在第一個示例中，您的列表以span –爲識別的HTML元素結尾。

在你的第二個例子，如果你有一個公認的元素– span，textarea等–它也可以在IE11 /邊緣取代baz。

這似乎是一個錯誤，因爲應該使用自定義元素沒有問題：Proper way to apply CSS to HTML5 custom elements

來源

2016-07-29 19:43:20

你只是重複我的問題回給我。這是一個公認的錯誤還是使用自定義元素或什麼是不好的做法？ – adamdport

我以爲你在尋找一個解釋。它看起來像一個錯誤，但我沒有看到任何文檔。在使用自定義元素方面，請參閱此答案：http://stackoverflow.com/q/36380449/3597276 –

謝謝。我沒有想到自定義元素不好，但找不到任何錯誤的確認。 – adamdport

-1

有了HTML5，您可以創建自定義元素。這是有效的，它是合法的。它甚至是諸如Polymer-Project之類的項目背後的一部分。所以總之，是的，你可以使用自定義元素。

但是，與所有好東西一樣，有一些注意事項。通過caniuse.com快速瀏覽一下瀏覽器對這些自定義元素的支持，顯示除了Chrome之外，幾乎所有主流瀏覽器都缺乏支持。實際上，W3C將Custom Element Spec概括爲工作草案（最後更新： 2016年7月21日），因此假設將會有變更。

如果你仍然對使用自定義元素感興趣，我會建議使用類似Polymer的東西。根據他們的compatibility chart：

聚合物庫是Web Components API上的一個輕量級糖層。與典型的JavaScript框架不同，Polymer旨在利用烘焙到Web平臺本身的功能讓您構建組件。 Polymer使用的某些功能尚未在所有瀏覽器中原生支持。對於廣泛的Web組件支持，Polymer使用webcomponents.org的polyfills。它們重量輕，工作良好，並提供聚合物所需的功能。

庫提供了必要的polyfills要在尚未完全實現規範，所以你應該是安全的使用自定義元素儘管原生支持的相對低量的瀏覽器此功能工作。

來源

2016-07-29 20:42:37 War10ck

最後的類型不與IE11自定義元素和邊緣

回答

相關問題