1.定义和用法

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

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

选取上面结构里面的li

ul li:nth-child(1){
color:#fff;
}/*选取第一个li*/
ul li:nth-child(odd){
color:#fff;
}/*选取偶数*/
ul li:nth-child(even){
color:#fff;
}/*选取奇数*/
ul li:nth-child(3n+1){
color:#fff;
}/*选取3n+1个元素*/

2.浏览器兼容性及解决

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

ul li:first-child{
color:#fff;
}/*选取第一个li*/
ul li:first-child+li+li{
color:#fff;
}/*选取第三个li*/

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,需要声明 。

解决IE8下CSS3选择器 :nth-child() 不兼容的问题的更多相关文章

  1. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  2. 解决IE8下opacity属性失效问题

    由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题. 在IE8及其更早的浏览器下,我们可以使用filter属性,来代替opacit ...

  3. 解决ie8下h5元素兼容性的问题

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  4. 解决IE8下不兼容rgba()的解决办法

    rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法. 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表 ...

  5. 解决IE8下VS2005,VS2008一些向导提示脚本错误问题

      Some VS2005 and VS2008 Wizards Pop Up Script Error. Visual C++ team has discovered that after inst ...

  6. 解决IE8下不支持document.getElementsByClassName的方法

    在代码前面加如下代码: if (!document.getElementsByClassName) { document.getElementsByClassName = function (clas ...

  7. 解决ie8下页面刚出现时候的晃动问题

    出现这个问题的原因的页面的高度超过一屏,这个时候需要在开始的时候给 html,body {overflow:scroll;overflow-x:hidden}; 这样就可以解决这个问题了

  8. ie8下jquery改变PNG的opacity出现黑边

    复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...

  9. 让IE8一下兼容CSS3选择器

    来自英国的网页开发工程师Keith Clark 开发了一个JavaScript方案来使IE支持CSS3选择器.该脚本支持从IE5到IE8的各个版本. 首先,您需要下载DOMAssistant脚本和ie ...

随机推荐

  1. sqlserver中压缩日志文件

    最近在转移数据,sqlserver的日志文件ldf,占用空间特别大,为了还原库,节省空间,所以压缩日志文件迫在眉睫.在网上找了一段代码: USE [master] GO ALTER DATABASE ...

  2. 用python给html里的css及js文件链接自动添加版本号

    传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sy ...

  3. Selenium元素定位之Xpath

    Xpath非常强大,使用Xpath可以代替前六种基本的定位方式,这种定位方式几乎可以定位到页面上的任何元素. Xpath简介 Xpath就是xml path,是一种在xml中查找信息的语言,因为htm ...

  4. animation,transform属性

    animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...

  5. 客户端用TortoiseSVN检出代码

    在桌面空白处右键选择SVN检出,如图: 在弹出的对话框中填写服务端版本库的URL (URL获取方式在前面一章中介绍过)选择检出目录点击确定,如图: 开始检出项目,如图: 检出完成之后打开副本,即可看到 ...

  6. 记kkpager分页控件的使用

    kkpager支持异步加载分页: 1.页面添加div标签和引用JS,默认标签为<div id="kkpager"></div> 引用JS和样式 <sc ...

  7. 关于SQL性能优化的十条经验

    1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'—— 红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 解决办法: 其实只需要对该脚本略做改进,查询速度便会 ...

  8. HashMap源码解析(JDK1.8)

    package java.util; import sun.misc.SharedSecrets; import java.io.IOException; import java.io.Invalid ...

  9. 微信小程序开发之--”emplate模板“的应用

    第一步:定义模板 ①:新建一个template文件夹用来管理项目中所有的模板(本文案例定义文件夹名为:temp): ②.新建一个wxml文件来定义模板(本文案例定义文件夹名为:temp.wxml): ...

  10. CSS(CSS3)选择器(2)

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...