解决IE8下CSS3选择器 :nth-child() 不兼容的问题
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() 不兼容的问题的更多相关文章
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- 解决IE8下opacity属性失效问题
由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题. 在IE8及其更早的浏览器下,我们可以使用filter属性,来代替opacit ...
- 解决ie8下h5元素兼容性的问题
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- 解决IE8下不兼容rgba()的解决办法
rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法. 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表 ...
- 解决IE8下VS2005,VS2008一些向导提示脚本错误问题
Some VS2005 and VS2008 Wizards Pop Up Script Error. Visual C++ team has discovered that after inst ...
- 解决IE8下不支持document.getElementsByClassName的方法
在代码前面加如下代码: if (!document.getElementsByClassName) { document.getElementsByClassName = function (clas ...
- 解决ie8下页面刚出现时候的晃动问题
出现这个问题的原因的页面的高度超过一屏,这个时候需要在开始的时候给 html,body {overflow:scroll;overflow-x:hidden}; 这样就可以解决这个问题了
- ie8下jquery改变PNG的opacity出现黑边
复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...
- 让IE8一下兼容CSS3选择器
来自英国的网页开发工程师Keith Clark 开发了一个JavaScript方案来使IE支持CSS3选择器.该脚本支持从IE5到IE8的各个版本. 首先,您需要下载DOMAssistant脚本和ie ...
随机推荐
- sqlserver中压缩日志文件
最近在转移数据,sqlserver的日志文件ldf,占用空间特别大,为了还原库,节省空间,所以压缩日志文件迫在眉睫.在网上找了一段代码: USE [master] GO ALTER DATABASE ...
- 用python给html里的css及js文件链接自动添加版本号
传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sy ...
- Selenium元素定位之Xpath
Xpath非常强大,使用Xpath可以代替前六种基本的定位方式,这种定位方式几乎可以定位到页面上的任何元素. Xpath简介 Xpath就是xml path,是一种在xml中查找信息的语言,因为htm ...
- animation,transform属性
animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...
- 客户端用TortoiseSVN检出代码
在桌面空白处右键选择SVN检出,如图: 在弹出的对话框中填写服务端版本库的URL (URL获取方式在前面一章中介绍过)选择检出目录点击确定,如图: 开始检出项目,如图: 检出完成之后打开副本,即可看到 ...
- 记kkpager分页控件的使用
kkpager支持异步加载分页: 1.页面添加div标签和引用JS,默认标签为<div id="kkpager"></div> 引用JS和样式 <sc ...
- 关于SQL性能优化的十条经验
1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'—— 红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 解决办法: 其实只需要对该脚本略做改进,查询速度便会 ...
- HashMap源码解析(JDK1.8)
package java.util; import sun.misc.SharedSecrets; import java.io.IOException; import java.io.Invalid ...
- 微信小程序开发之--”emplate模板“的应用
第一步:定义模板 ①:新建一个template文件夹用来管理项目中所有的模板(本文案例定义文件夹名为:temp): ②.新建一个wxml文件来定义模板(本文案例定义文件夹名为:temp.wxml): ...
- CSS(CSS3)选择器(2)
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...