CSS nth-last-child瀏覽器支持

Question

是否有人熟悉：nth-​​last-child僞選擇器？ 我很驚訝它沒有在caniuse.com上列出。

那麼，您對IE支持的體驗如何？ 將顏色添加到李的冗長而無聊的列表中會很酷。

http://www.w3schools.com/cssref/sel_nth-last-child.asp

Answer 1

HTML

<ul> 
     <li>First Item</li> 
     <li>Second Item</li> 
     <li>Third Item</li> 
     <li>Fourth Item</li> 
     <li>Fifth Item</li> 
    </ul> 

CSS：

li { 
    background: slategrey; 
} 
/* select the second-last item */ 
li:nth-last-child(2) { 
    background: lightslategrey; 
} 

See more details

Mention in HTML5Please Selectors

將列表添加到HTML5請爲css選擇部分，其中提到了IE8日落之後nth-last-child的可用性。

selectivizr

<script type="text/javascript" src="[JS library]"></script> 
<!--[if (gte IE 6)&(lte IE 8)]> 
    <script type="text/javascript" src="selectivizr.js"></script> 
    <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> 
<![endif]--> 

• 的使用只包含在你的網頁的標記此腳本。如果您不是 已經在使用JavaScript庫，則需要從下表中選擇一個來自 。

Answer 2

高級CSS選擇器支持幾乎所有的瀏覽器，但IE瀏覽器：IE9從支持。

檢查：http://caniuse.com/#feat=css-sel3

Answer 3

加法：如果你想使用IE7和IE8的選擇，你可以使用Webshim。這是一個polyfill javascript庫，它使HTML5和CSS3選擇器能夠訪問較舊的瀏覽器（大部分時間是IE7和IE8）。它很容易使用和安裝。

這裏是如何使用它的詳細說明的鏈接：http://css-tricks.com/how-to-use-the-webshims-polyfill

希望這有助於你。

Answer 4

:nth-child:nth-last-child在IE8上不起作用。您可以使用名爲selectivizrhttp://selectivizr.com/的JavaScript庫。

selectivizr是一個JavaScript實用程序，它模擬Internet Explorer 6-8中的CSS3僞類和屬性選擇器。

可以使用:nth-child

ul li{ list-style-type:none; line-height:1.5em;} 

li:nth-child(odd) { 
    background-color: #ccc; 
} 
li:nth-child(even) { 
    background-color: #eee; 
} 

HTML是這樣做斑馬strippting ..

<ul> 
    <li>ITem1 </li> 
    <li>ITem2 </li> 
    <li>ITem3 </li> 
    <li>ITem4 </li> 
    <li>ITem5 </li> 
    <li>ITem6 </li> 
    </ul> 

這是一個工作演示。 http://jsbin.com/yaculabe/1/edit