兄弟选择器 E + F

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

   如果兄弟选择器有Html注释，兄弟选择器在IE7下会失效  代码如下

p + 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> 

         .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;}

 

运行结果如下：