求有什么方法可以让ie8兼容css3的nth-child，：after这种伪类选择题_百度知道
求有什么方法可以让ie8兼容css3的nth-child，：after这种伪类选择题
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
nth-child这个倒是可以换个思路实现，这个一般用在ul
li标签中，奇偶行的mouseover效果，ul li:nth-child(odd){
color:#}/*选取偶数*/ul li:nth-child(even){
color:#}/*选取奇数*/以上的是兼容的写法，改进后的写法如下：ul li:first-child{
color:#}/*选取第一个li*/ul li:first-child+li+li{
color:#}/*选取第三个li*/依次还可以有第5个li，等等，好在开发中li的个数一般不会多，虽然是个比较麻烦的做法，好歹能解决问题，至于after,before之类的，也不能说没法实现，也是曲线救国的方法，有个简单的思路你可以参考下，你应该清楚的是after是主样式加载完之后才表现的，after说白了也是一个样式表，或者说是个额外的class,那么好了，后期我们通过JS可以添加这个Class了，具体这个after通过鼠标点击添加呢 还是download时候就加载这个就看你了，以上为思路，仅供参考
采纳率：83%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS3 :nth-child(n)使用注意 - 白杨-M - 博客园
随笔 - 170, 文章 - 0, 评论 - 3, 引用 - 0
:nth-child(n) & &----&选中某个元素，该元素必须是某个父元素下的第n个子元素；
p:nth-child(n) & ----&选中p元素，且该p元素必须是某个父元素下的第n个子元素
注意：n是从1开始的
如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p;
不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素
p:nth-child(1){
&div style="border:1px solid"&
&span&div span中第一个段落。&/span&
&p&div 中第一个段落。&/p&
&p&div 中的最后一个段落。&/p&
&/div&&br&
&div style="border:1px solid"&
&p&另一个 div 中第一个段落。&/p&
&p&另一个 div 中的最后一个段落。&/p&
正方向范围
li:nth-child(n+6)
选中从第6个开始的子元素
负方向范围
:nth-child(-n+9)
选中从第1个到第9个子元素。使用&:nth-child(-n+9)&，就相当让你选中第9个和其之前的所有子元素
前后限制范围
:nth-child(n+4):nth-child(-n+8)
选中第4-8个子元素。使用&nth-child(n+4):nth-child(-n+8)&我们可以选中某一范围内子元素，上面的例子里是从第4个到第8个子元素
奇数、偶数位
:nth-child(odd)
:nth-child(even)
隔选择子元素
:nth-child(3n+1),
选择1,4,7,10
范围高级用法
nth-child(n+2):nth-child(odd):nth-child(-n+9)
使用&nth-child(n+2):nth-child(odd):nth-child(-n+9)&我们将会选中的子元素是从第2位到第9位，并且只包含奇数位。怎么解决ie7不兼容伪类nth-child的问题_百度知道
怎么解决ie7不兼容伪类nth-child的问题
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
前面的文章中我们介绍过CSS中非常有用的一个标签伪类 :nth-child(n)，这个伪类在我们的网页中的一些特效中会用到，比如：表格的隔行变色、导航菜单的分隔符等。这些都可以让我们的网页不再单调而与众不同。但是，:nth-child(n)有一个它至命的弱点，就是IE浏览器不支持。而国内使用IE浏览器的用户还是非常多，为了不流失这部分用户，我们必须要解决这个问题。那么，怎样让IE浏览器能兼容CSS的 :nth-child(n)呢？
采纳率：91%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。您的位置：
css3伪类选择器nth-child()终极玩法
发布者: moke |
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜，如果做为一个前端开发者连css3伪类选择器nth-child()都没有用过的话，我只能对你说两个字“呵呵”，当你用过它之后，你就会情不自禁的喜欢上它。。。。。。。
css3伪类选择器nth-child()
:nth-child(an+b)
为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。
伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。
第一种：简单数字序号写法
:nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
li:nth-child(3){background:}/*把第3个LI的背景设为橙色*/
第二种：倍数写法
:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
li:nth-child(3n){background:}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三种：倍数分组匹配
:nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）
li:nth-child(3n+1){background:}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:}/*相当于(3n)*/
li:nth-child(±0n+3){background:}/*相当于(3)*/
第四种：反向倍数分组匹配
:nth-child(-an+b)
此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。
li:nth-child(-3n+8){background:}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/
第五种：奇偶匹配
:nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
元素选择符 Element Selectors
关系选择符 Relationship Selectors
属性选择符 Attribute Selectors
E[att="val"]
E[att~="val"]
E[att^="val"]
E[att$="val"]
E[att*="val"]
E[att|="val"]
伪类选择符 Pseudo-Classes Selectors
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:disabled
@page:first
@page:left
@page:right
伪对象选择符 Pseudo-Element Selectors
E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::selection
魔客吧温馨提示：在魔客吧有许多的精品
，如果你正需要wordpress主题，那么赶快去下载吧！
本文地址：
文章标题：
最新分享资源您的位置： >
CSS3 nth-child 伪类的用法
CSS3 nth-child 伪类的用法
CSS3提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家会觉得非常混乱，但当掌握了以后能大大提高你的代码效率，并且节省代码量。今天先要说的是nth-child伪类。
nth-child伪类的定义
nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用an+b的形式选择子元素，举例用法如下：
tr:nth-child(2n+1) /* 选择表格里的单数行 */ tr:nth-child(odd) /* 同上 */ tr:nth-child(2n) /* 选择表格里的双数行 */ tr:nth-child(even) /* 同上 */
聪明的看官大概已经知道nth-child伪类可以用来干什么了。
CSS3 nth-child 伪类应用实例 & 隔行变色列表
既然nth-child伪类能让我们轻松第选择容器里的某一个子元素，我们是不是可以用它来干点什么呢？需求最大的当然是隔行变色的表格或者列表。我们这就去做一个隔行变色的列表看看。
首先确定列表的HTML结构，我使用了做简单的ul & li结构，代码如下
&ul& &li& 项目一 &/li& &li& 项目二 &/li& &li& 项目三 &/li& &li& 项目四 &/li& &li& 项目五 &/li& &li& 项目六 &/li& &li& 项目七 &/li& &/ul&
列表的结构确定后，我们要做的是使ul里的七个li项根据单双项的规则进行隔行变色的处理。因此我们用nth-child(2n+1)或者nth-child(2n)进行选择都可以。我的CSS代码如下：
ul li { background: #9FF none repeat scroll 0 0; list-style-image: list-style-position: list-style-type: padding: 10 color: #000; } ul li:nth-child(2n+1) { background: #6F9 none repeat scroll 0 0; }
在这里我选择了对列表的单数项进行特殊渲染，下面是我做出来的效果，大家也可以看这个。
nth-child伪类的衍生
除了nth-child以外，W3C还为我们提供了几个基于nth-child定义的衍生伪类，这里简单地说说他们的用途。
E:nth-last-child(n): 选择某个子元素，从最后一个数起
E:nth-of-type(n): 选择某个某种类型的子元素
E:nth-last-of-type(n): 选择某个某种类型的子元素，从最后一个符合条件的元素数起
E:first-child: 选择第一个子元素（这个伪类在CSS2里就有）
E:last-child: 选择最后一个子元素
nth-child伪类的家族里，除了E:first-child外，其他的伪类都只能在支持CSS3的浏览器里起作用，也就是说在目前的IE里是看不到效果的。
上一篇： 下一篇：}