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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
js中this用法实例详解
2015/05/05 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
python装饰器初探(推荐)
2016/07/21 Python
Python模拟用户登录验证
2017/09/11 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python中图像通道分离与合并实例
2020/01/17 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
就业自荐信
2013/12/04 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
会计人员岗位职责
2015/02/03 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python