测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻
2024-08-27 04:02:56
环境 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支持。
最新文章
- 编写高质量代码:改善Java程序的151个建议(第3章:类、对象及方法___建议47~51)
- 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图
- docker之文件夹共享
- Zookeeper安装,Zookeeper单机模式安装
- Linux信号处理
- openerp 经典收藏 Openerp开发进销存系统完毕总结(转载)
- 使用JQUERY实现局部页面定时刷新
- 【常用小命令】解决windows下有些文件文件名识别不了导致删除不了的问题
- python 程序中设置环境变量
- Windows Azure 社区新闻综述(#78 版)
- PHP Startup: Unable to load dynamic library &#39;/usr/lib64/php/modules/event.so&#39;
- ASP.NET Core 2.0 : 八.图说管道
- [LeetCode] Out of Boundary Paths 出界的路径
- android之View绘制
- java实现http的post和get
- Android-Lock-多线程通讯(生产者 消费者)&;等待唤醒机制
- 【Unity】8.1 Unity内置的UI控件
- node.js--Less
- Hadoop基础-SequenceFile的压缩编解码器
- bzoj 1468 Tree 点分