IE8下CSS3选择器nth-child() 不兼容问题的解决方法


Posted in HTML / CSS onNovember 16, 2016

一、代码

<style>
ul{list-style: none}
div ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}
div ul li:nth-child(1){background:#f00;}
div ul li:nth-child(3){background:#ccc;}
</style>
    
<div>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
</div>

二、预览效果

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

如上图,ie9及以上背景色能显示

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

问题:如上图,ie8背景色显示不出来

三、解决方法

<style>
ul{list-style: none}
div ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}
div ul li:first-child{background:#ccc; }/*选取第一个li*/
div ul li:first-child+li+li{background:#ff0;}/*选取第三个li */
</style>
    
<div>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
</div>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 #HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 #HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 #HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 #HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 #HTML / CSS
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python程序 创建多线程过程详解
2019/09/23 Python
python TCP包注入方式
2020/05/05 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
团员的自我评价
2013/12/01 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
医院节能减排方案
2014/06/13 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
新教师教学工作总结
2015/08/14 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android