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,~表示了屬性檢查單個屬性值全部,並支援比較連字元之前比較