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

时间：2021-01-08 21:20:21

环境 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支持。

相关文章