last-child兼容至IE8

使用方法

jQuery :nth-child() 选择器的使用方法和 CSS3 的:nth-child()没什么两样。

关于 CSS3 :nth-child() 选择器 拽这里：http://www.exiang2.com/web/513.html

• :nth-child(odd)用于匹配奇数子元素

• :nth-child(even)用于匹配偶数子元素

• :nth-child(n)用于匹配第n个元素

• :nth-child(an)用于匹配倍数为a的元素，如3n、5n…

• 可以是一个公式，如:nth-child(3n+1)匹配第1、第4、第7…个元素

• :nth-child(-n+3)匹配前3个元素

• :nth-child(-3n+8)匹配第8、第5、第2个元素

关键是判断是否为 IE8 浏览器，然后执行代码。实例：

 
 
        if($.browser.msie && parseInt($.browser.version) == 8){
        $('.wen .content img').css('max-width','auto')
        $('.single .related .b-post:even').css('margin-right','1.5%')
        $('.wen .readers-list li:nth-child(3n)').css('margin-right','0')
        $('.flink ul:nth-child(3n)').css('margin-right','0')
        $('.widget .readers-list li:nth-child(2n)').css('margin-right','0')
        $('.flink ul:nth-child(3n)').css('margin-right','0')
        }

1.定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 
n 可以是数字、关键词或公式。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ul</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>1<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>2<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>3<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>4<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ul</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

选取上面结构里面的li

<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ul</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child(1)</span><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*选取第一个li*/</span>
<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ul</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child(odd)</span><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*选取偶数*/</span>
<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ul</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child(even)</span><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*选取奇数*/</span>
<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ul</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:nth-child(3n+1)</span><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*选取3n+1个元素*/</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

2.浏览器兼容性及解决

由于IE8不支持这种选择器的写法，所以一下给出兼容性写法

<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ul</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:first-child</span><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*选取第一个li*/</span>
<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ul</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:first-child+li+li</span><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-hexcolor" style="box-sizing: border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*选取第三个li*/</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

3.css其他选择器介绍

• :nth-of-type() 选择器 ——选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. 
  n 可以是数字、关键词或公式。与:nth-child(n)不同的是后者与类型无关。（同样不支持IE8）

• :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。 
  提示：等同于 :nth-of-type(1)。（同样不支持IE8）

• :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。 
  提示：等同于 :nth-last-of-type(1)。（同样不支持IE8）

• :only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。（同样不支持IE8）

• :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。（同样不支持IE8） 
  提示：请参阅 :nth-last-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。

• :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。n 可以是数字、关键词或公式。（同样不支持IE8） 
  提示：请参阅 :nth-last-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，从最后一个子元素开始计数。

• :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。（同样不支持IE8） 
  提示：p:last-child 等同于 p:nth-last-child(1)。

• :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。对于 IE8 及更早版本的浏览器中的 :first-child，需要声明 。