兄弟選擇器 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;}

 

運行結果以下：