测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻
环境 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支持情况,属性选择器/子元素/相邻的更多相关文章
- 解决ie6下不支持fix属性,模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 让IE6/IE7/IE8支持CSS3属性的8种方法介绍
我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...
- 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 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- css3 -- 属性选择器
属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...
随机推荐
- 3_Guess Fingers
3 // // ViewController.swift // Guess Fingers // // Created by ZC on 16/1/8. // Copyright © 2016年 ZC ...
- 转:php+mysql菜单无限级分类(非递归)
php+mysql无限级分类(非递归) 参考:http://www.chhua.com/web-note3244
- json数据与字符串的相互转化
json转成string[需要引用json2.js文件]: var arr=[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]; var str=JSON ...
- C# windows ce编程-----我的第一次
最近公司要求开发抄表软件,软件分为PC端和手持终端(简称HHU),HHU是基于英文版的windows ce6.0操作系统,开发环境要求VS2005+SQLite数据库,开发语言为C#,因为是第一次基本 ...
- 代码收藏 JS实现页内查找定位功能
前部分为IE下搜索方法 用TextRange来实现 后部分为firefox.chrome下搜索方法 var nextIndex = 0; var searchValue = ''; var input ...
- Python学习入门基础教程(learning Python)--2.2 Python下的变量基础
变量的基本概念,变量可以这样去理解,变量是一个值,这个值存储在计算机的内存里.以网购为例,您在选购傻商品的时候,是在不同页面里选不同的商品,选好一件点击“放入购物车”,选完了再点击去结帐,这些商品的价 ...
- cocos2d-x删除vs2010项目模板
假设你切换cocos2d-x版本号的话. 要将之前版本号的vs模板删除掉.方法例如以下: 进入下面文件夹(依据自己的vs版本号): VS2008: C:\Program Files\Microsoft ...
- Ext JS学习第十五天 Ext基础之 Ext.DomQuery
此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query ...
- 通知/代理/block 三者比对
通知 : “一对多”,”多对一” 传值 四个步骤: 1.发送通知2.创建监听者3.接收通知4.移除监听者 使用场景:1- 很多控制器都需要知道一个事件,应该用通知:2 - 相隔多层的两个控制器之 ...
- virtual 关键字
virtual 关键字用于修饰方法.属性.索引器或事件声明,并且允许在派生类中重写这些对象.例如,此方法可被任何继承它的类重写. public virtual double Area() { retu ...