CSSHack 选择器

介绍经常使用的，如：组选择器，组合选择器，后代选择器。另外其他有时作用CSSHack用。

选择器的目的:减少class和id的滥用,使CSS文档结构和网页文档结构更加清晰,方便维护和管理

1、组选择器

　　格式：用逗号分隔，mix,mix,mix{......}

　　功能：多个标签共用一个样式

　　比如：

　　　　<h1></h1>

　　　　<div id="test"></div>
    　　  <p class="test2"></p>
   　　   <p class="test2">
                  <span></span>
    　　  </p>

　　　　h1,#test,.test2,span{......}将控制上边所有的标签。

2、组合选择器

　　格式：<label class="样式1 样式2..."></label>class 之间用空格隔开

　　功能：该标签拥有多个样式，也就是被多个样式所拥有。

　　比如：

    .color{
        color:yellow;
        background:green;
      }
      .box{
        width:200px;
        height:100px;
        text-align:center;
      }
    <p class="color box">today,i feel happy.</p>
    这里p标签受color 和 box 两个样式共同作用

3、自身选择器

　　自身选择器:(不常用,因为多数用到class属性时就是为了构成样式组.这里只是添加了元素限定而已.官方建议写class时省略其标签)
  格式:label.class名
  功能:限定本标签样式,不同于其他运用这个class的标签.
  比如:p.test是作用在<p class="test"></p>标签上,而其他运用test样式按照test样式

4、后代选择器

  格式:mix mix(一般第一个mix很少用class,毕竟选择器本着减少class和id的目的)
  作用:它们之间有空格,控制第一个mix的后代mix,后代不一定要子代,可以深层嵌套
  比如:
    <div id="test">
      <p id="test2"></p>
      <p>
        <span></span>
      </p>
      <h1 class="test3"></h1>
    <div>
    #test #test2控制<p id="test2"></p>样式(当然这种写法很少用,毕竟都有id了,可以直接控制#test2);
    #test span控制<span></span>样式,这里span是深层的后代;
    #test .test3控制<h1 class="test3"></h1>样式
  常用:(2种)
    #id名 label
    label label

5、临近选择器

格式:mix+label
  作用:mix的下一个兄弟指定标签的样式控制
  比如:
    <div id="test">
      <h1></h1>
    </div>
    <p></p>
    <p></p>
    #test+p将控制#test后第一个p标签的样式
  常用:(2种)
    #id名+label
    label+label

6、子代选择器

格式:mix>label
  作用:mix的第一代孩子指定标签的样式控制
  比如:
    <div id="test">
      <p></p>
      <div>
        <p></p>
      </div>
      <p></p>
    </div>
    #test>p将控制第一代的p标签,也就是上面例子的第一个p和最后一个p标签.嵌套的p标签(第二个)不受该样式控制
  常用:(2种)
    #id名>label
    label>label

7、属性选择器（IE6及其以下版本不支持,IE7已提供支持）

属性选择器包括下面4个方面:
    元素[属性]{}(相对于后面几个很少用)
    元素[属性="xx"]{}
    元素[属性~="xx"]{}
    元素[属性|="xx"]{}
    它们具体功能和用法如下:
      <div class="test1"></div>
      <div class="test2"></div>
      <div class="test1 test2"></div>
      <div class="test-1"></div>

      div[class]将匹配上面三个div
      div[class="test1"]匹配第一个div,也就是限定了class值必须是test1
      div[class~="test1"]匹配第一个和第三个div,~表示了属性值中有一个满足即可
      div[class|="test"]匹配最后一个div,~表示了属性检查单个属性值全部,并支持比较连字符之前比较