环境 xp ie 8 , ietester

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<style rel="stylesheet" type="text/css">

    *{font-size:19px;}

    i{color:red; font-weight:bold; margin:0 10px;}

    b{color:#BF7C17; margin:0 10px;}

    h2,p{padding:20px; }

    h2{background:#eee; font-size:20px;}

    p{font-size:15px;}

    p[attr]{color:blue; }   /* ie7-8 ok, ie6 not support */

    p[attr="bar"]{color:pink; } /* ie7-8 ok , ie6 not */

    p[attr~="go"]{color:green;} /*ie7-8 ok, ie6 not */

    p[attr|="some"]{color:red;} /* ie7-8 ok, ie6 not */

    .subEle > span {  background:#eee;} /*ie 7-8 ok, ie6 not */

    .nextSibling ~ span{background:pink;} /* ie7-8 ok, ie6 not */

    .DnextSibling + span{background:skyblue;} /* ie7-8 ok, ie6 not */

    .fc span:first-child{border:1px solid red;} /* ie7-8 ok, ie6 not */

    .lc span:last-child{border-bottom:2px solid red;} /* ie6-8 not */

</style>

</head>

<body>

<h2>测试CSS2属性选择器的支持情况</h2>

<p attr="foo">测试selector是否支持[attr] 字体为蓝色 则支持<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></p>

<p attr="bar">测试selector是否支持[attr=value] 字体为粉红色 则支持<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></p>

<p attr="baz go">测试selector是否支持[attr="val1 valtarget"] 字体为绿色 则支持<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></p>

<p attr="baz-some-thing">测试selector是否支持[attr="val1-valtarget"] 字体为红色 则支持<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></p>

<hr />

<h2>测试CSS2关系选择器的支持情况</h2>

<div class="subEle"><span>E>F 若支持子元素选择器 背景灰色<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></span></div>

<div><p><span>span1</span><span class="nextSibling">span2 ref </span><span>span3</span><span>E ~ F 若支持后置同辈元素选择器 背景粉红色<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></span></p></div>

<div ><p><span class="DnextSibling">span1</span><span>E + F 若支持相邻后置同辈元素选择器 背景蓝色<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></span></p></div>

<hr />

<h2>测试CSS2 :first-child :last-child选择器的支持情况</h2>

<p class="fc"><span>:first-child 若支持则有边框<i>测试通过：IE8 IE7</i><b>测试不通过 IE6</b></span></p>

<p class="lc"><span>span1</span><span>span2</span><span>:last-child 若支持则有下边框<b>测试不通过：IE8 IE7 IE6</b></span></p>

<script type="text/javascript">

alert(navigator.userAgent);

</script>

</body>

</html>

1.  类选择器

.important{color:blue;}

.important.iterm{border:1px solid red;}

~~所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。

测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻的更多相关文章

  1. 解决ie6下不支持fix属性，模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  3. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

  4. CSS3(各UI元素状态伪类选择器受浏览器的支持情况)

    选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...

  5. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  6. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  7. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  8. css3 -- 属性选择器

    属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...

  9. CSS3的属性选择器

    CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...

随机推荐

  1. nrf51 官方PWM库

    地址:https://github.com/NordicSemiconductor/nrf51-pwm-library nrf_pwm_init函数 初始化PWM参数 设置输出pwm的gpio pin ...

  2. java代码发送JSON格式的httpPOST请求

    package com.test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOE ...

  3. MyReport报表引擎2.6.5.0新功能

    新的文本渲染引擎,打印旋转时保持文本高精度矢量输出,打印更清晰.  watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva29uZ195ZWU=/font/5a6 ...

  4. 打造自己的sublime text

    博主今天正在了解学习LESS,在找相关资源的过程中,发现自己的sublime text和别人差别有点大,突然脑海中一股逼格的气息油然而生,于是查找了相关资料,并打造了一下风格. 下面开始正文. 首先是 ...

  5. Angular JS 学习笔记（一）

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  6. BZOJ 1726: [Usaco2006 Nov]Roadblocks第二短路( 最短路 )

    从起点和终点各跑一次最短路 , 然后枚举每一条边 , 更新answer ---------------------------------------------------------------- ...

  7. 字符串解析成easyui-tree的格式

    传入的list: [30 : null : null, 301503 : null : null, 301501 : null : null, 301502 : null : null, 3015 : ...

  8. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  9. 写一个兼容性比较好的拖拽DEMO

    写一个兼容性比较好的拖拽DEMO 查看Demo 思路 div盒子 鼠标按下事件onmousedown 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标 鼠标抬起事件om ...

  10. poj 1715 Hexadecimal Numbers 排列组合

    /** 大意: 给定16进制数的16个字母,,求第k大的数,,要求数的长度最大为8.,并且每个数互不相同. 思路: 从高到低挨个枚举,每一位能组成的排列数 ,拿最高位来说,能做成的排列数为15*A(1 ...