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

enter image description here

See more details

Mention in HTML5Please Selectors

为css添加一个列表到HTML5Please选择器部分，其中提到了IE8日落的Nth-last-child的可用性。

选择性的使用

<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库，您需要从中选择一个下表。

enter image description here

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上运行。您可以使用名为selectivizr http://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就是这样..

 <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

CSS nth-last-child浏览器支持

4 个答案: