【前言】
学生提问：nth-child（n）属性在IE8浏览器失效方案？
【案例】
在项目中经常用到nth-child（n）属性，如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo测试</title>
<style type="text/css">
*{margin: 0;padding: 0}
.parent{
width: 600px;
height: 300px;
border: 1px solid red;
margin: auto;
}
.parent div{
display: inline-block;
width: 100px;
height: 100px;
*display: inline;
zoom:1;
}
.parent div:nth-child(1){
background-color: red;
}
.parent div:nth-child(2){
background-color: blue;
}
.parent div:nth-child(3){
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
该属性却在IE8浏览器中出现兼容性问题，可以使用以下方式处理在IE8中兼容性
【方案】
（1）方案一
这里我首先想到的一个简单的解决方案为CSS兄弟选择器，因为IE支持first-child与last-child，所以我可用兄弟选择器去解决。
缺点：子元素过多时，不易操作
<style type="text/css">
.parent div:first-child{
background-color: red;
}
.parent div:first-child+div{
background-color: blue;
}
.parent div:first-child+div+div{
background-color: green;
}
</style>
（2）方案二
使用jQuery中的选择器:nth-child代替，和css3中的使用规则相同
: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个元素
.
相关推荐
一、代码 <style> ul{list-style: none} ...div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <li>11 <li>22 <li>33 二、预览效果 如上图
面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为...
我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 --> 然后两个选择器相对应的CSS代码如下： ...p:nth-child(2) { color: red;...对于:nth-child选择器，在简单白话文中，意味着选择一个元素：
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我...
对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型...
加入要让第二个 th 占table表格总宽度的50%. 复制代码代码如下: <...:nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N （这里选择第2个）个子元素（这里子元素是th），不论元素的类型。
面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上...
CSS-nth-child
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很...
;padding-bottom:34px;"> <span class="item-num item-nums">1 <span class="item-title">2020年！....item:nth-child(1) > .item-num{ color:#ffffff; background: #ff4e00; } 这样就能实现span的1变色
但两者是存在差异的 :nth-child 选择器，在此例子中意思就是指 1.首先是个p元素 2.其次这个p元素是其父元素的第二个孩子 :nth-of-type 选择器，在此例子中意思就是指 1.定位一个父元素下的第二个p元素 :nth-of-type