css后代选择器兼容IE8及IE8以下

css后代选择器很好用,让我们的工作变的更方便。但有个麻烦,IE8及IE8以下对很多后代选择器并不兼容。

这六个后代选择器是比较长用到的:

这时会发现,IE9对这些后代选择器都兼容。IE8、IE7除了的 :first-child 是兼容的,其他五个都不兼容。

兼容:

<body>
     <div>
           <p>aaaa</p>
           <p>aaaa</p>
           <p>aaaa</p>
           <p>aaaa</p>
     </div>
</body>

一、让第2个p元素变成“蓝色”字体.

一般是这样写  div p:nth-child(2) { color:blue; }

或者  div p:nth-of-type(2) { color:blue; }

或者  就是给第2个p元素加上class了。

要在IE7,IE8上进行兼容:

第一种方法: div>p:first-child+p  { color:blue; }

第二种方法是用Jquery:

if (navigator.appName === ‘Microsoft Internet Explorer‘) { //判断是否是IE浏览器
   if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
          $(‘p:nth-child(2)‘).css(‘color‘,‘blue‘);        //$(‘p:nth-of-type(2)‘).css(‘color‘,‘blue‘);
   }
}

一、让第2个,第4个p元素变成“蓝色”字体.

一般是这样写  div p:nth-child(2n) { color:blue; }

或者  div p:nth-of-type(2n) { color:blue; }

要在IE7,IE8上进行兼容:df sasda

if (navigator.appName === ‘Microsoft Internet Explorer‘) { //判断是否是IE浏览器
   if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
          $(‘p:nth-child(2n)‘).css(‘color‘,‘blue‘);
        //$(‘p:nth-of-type(2n)‘).css(‘color‘,‘blue‘);
   }
}

:nth-child(odd),:nth-child(odd) 奇数偶数,同样可以这样处理。

时间: 2024-10-12 13:56:39

css后代选择器兼容IE8及IE8以下的相关文章

CSS系列(8) CSS后代选择器和子选择器详解

一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> <p>这个p标签是div的后代</p> <div> 后代选择器就是用来选择一个标签的后代的: 两个选择器中间添加一个[空格]就构成了后代选择器,空格后面的那个是后代. 例如: div p { color : red; } 它会选择一堆的p标签,只要这个p标签是嵌套在某个div标签内

小tip: CSS后代选择器可能的错误认识——张鑫旭

一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class

css后代选择器(div.class中间不带空格)

如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/css/css_selector_descendant.asp

CSS 后代选择器

后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. 举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写: h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色.其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中: <h1>Th

CSS后代选择器,子选择器和相邻兄弟选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}[h1和p之间用+隔开] ②功能不一样:后代选择器(descendant selector),又称为包含

CSS后代选择器和子选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开] ②功能不一样:后代选择器(descendant selector),又称为包含选择器,可以选择某元素后代的元素,如上例,后代选择器是选择ul包围的所有元素中的所有li元素,包括儿子元素

CSS后代选择器可能的错误认识

一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class="red&qu

Css 后代选择器与子代选择器的区别

后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px solid red;} 但是,如果你仔细想想,这俩个概念是不是有重复的地方, 后代是不是也是子代? 子代不也是后代吗? 具体两者的关系不作讨论,我们来看看在css中具体有什么不同? 先上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

CSS后代选择器“空格”和“&gt;”的使用辨析

要点: 1. "空格":包含子孙 2. ">":含子不含孙 举个栗子: html代码如下 1 <body> 2 <div class="parent"> 3 <p>1p</p> 4 <div>2div 5 <p>-2.1p</p> 6 <p>-2.2p</p> 7 <a>-2.3a</a> 8 </div