兄弟选择器 E + F

兄弟选择器在IE7下支持会有bug，特记于此

   若是兄弟选择器有Html注释，兄弟选择器在IE7下会失效  代码以下

E + Fp + p{color:red}

<p class="test1">some message 01</p>
<p class="test2">some message 02</p>
<p class="test3">some message 03</p>
<!-- some message -->
<p class="test4">some message 04</p>
<p class="test5">some message 05</p>
<p class="test6">some message 06</p>

IE7下 .test2,.test3,.test5,.test6会是红色，其他是黑色

后代选择器 E > F  ，在IE7(Q)版本中，若是父元素与子元素有html注释，也会失效（未测试)

通用兄弟选择器没有这一个bug

 

属性选择器会 ^  |  这两种 有一点要注意，若是一个元素有多个类名，要找的类名必须是第一位，不然，会忽视它，尽管符合条件

.clearfix{overflow: hidden; _zoom: 1;}
.demo{width: 300px;border: 1px solid #ccc;padding: 10px;}
.demo a{float:left;display: block;height: 20px;line-height:20px; width: 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-align: center;background:#f36;color: green;margin-right: 5px;text-decoration: none;}
.demo a[lang^="zh"]{background:yellow}	

<div class="demo clearfix">
<a class="test fsy_1" href="" lang="zh">01</a>
<a class="test fsy_2" href="" lang="zh-cn">02</a>
<a class="test fsy_3" href="" lang="cn-zh zh-en">03</a>
<a class="test fsy_4" href="">04</a>
<a class="test fsy_5" href="">05</a>
<a class="test fsy_6" href="">06</a>
<a class="test fsy_7" href="">07</a>
<a class="test fsy_8" href="">08</a>
<a class="test fsy_9" href="">09</a>
<a class="test fsy_10" href="">10</a>
</div>

 

关于nth-child与nth-of-type选择器的差异

  1.二者以前均可以不写元素选择器，若是不写没有任何差异

   2.若是写元素选择器，nth-child()中的数值表明的是在父元素中的索引位置，而nth-of-type中的数值指的是元素在父元素中相同元素间的位置 

 1  < div  class ="demo clearfix" >
 2  <!--  some message  -->
 3 < span >span1 </ span >
 4  < a  href ="" >a1 </ a >
 5  < a  href ="" >a2 </ a >
 6  < a  href ="" >a3 </ a >
 7  < a  href ="" >a4 </ a >
 8  < span >span2 </ span >
 9  < a  href ="" >a5 </ a >
10  < a  href ="" >a6 </ a >
11  < a  href ="" >a7 </ a >
12  < a  href ="" >a8 </ a >
13  < span >span3 </ span >
14  < a  href ="" >a9 </ a >
15  < a  href ="" >a10 </ a >

16 </div> 

1          .demo a{ color: #000; text-decoration:  none; font-size: 30px;}
2          .demo :nth-child(n+2){ color: red; font-size:  16px;}
3          .demo a:nth-child(2){ color: blue; background: yellow;}
4          .demo a:nth-of-type(3){ color: green; background: red;}
5          .demo span:nth-child(2){ color: black; font-size: 100px;}
6          .demo span:nth-of-type(2){ color: yellow; background: gray;}
7          .demo :nth-of-type(n+7){ color: #139ac7; background: #333;}

 

运行结果以下：