css选择器

css中的选择器
   (1)简单选择器（仅描述html的元素）
        body {
         background-color:red;
        }
    (2)id选择器(html元素的id属性，唯一)
       #myid {
          background-color:red;
       }
    (3)class选择器(html元素的class属性)
     .myclass {
        background-color:red;
     }
        
    (4)多个html元素共用一个样式的定义
      body,table,tr,td {
      background-color:#000000;
     }
  css选择器的高级部分
    CSS的选择器这里你将学习到CSS中选择器的应用,有些是经常使用的,如组选择器,组合选择器,后代选择器.另外,
    其他一些有时用作CSS Hack用(某些选择器IE6及其以下版本不支持).下面是要介绍的选择器列表:
    A.组选择器
    B.组合选择器
    C.自身选择器
    D.后代选择器
    E.临近选择器
    F.子代选择器
    G.属性选择器
    
    选择器的目的:减少class和id的滥用,使CSS文档结构和网页文档结构更加清晰,方便维护和管理
    介绍这些选择器之前,我们规定下书写:
     label:表示标签,比如<p>,<div>,<ul>等等
     mix:表示标签,class名,id名其中的一个(class名是某个标签的class属性的属性值,id名是某个标签的id属性的属性值)

    1.组选择器:
      格式:用逗号分割,mix,mix,mix{..}
      功能:多个标签(或id或class)共用一个样式
      比如:
        <h1></h1>
        <div id="test"></div>
        <p class="test2"></p>
        <p class="test2">
          <span></span>
        </p>
        h1,#test,.test2,span将控制上面所有的标签
    
    2.组合选择器:(这个是我给的名称,本质是一个标签运用多个class样式)
      格式:<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.临近选择器(IE6及其以下版本不支持,IE7已提供支持):
      格式:mix+label
      作用:mix的下一个兄弟指定标签的样式控制
      比如:
        <div id="test">
          <h1></h1>
        </div>
        <p></p>
        <p></p>
        #test+p将控制#test后第一个p标签的样式
      常用:(2种)
        #id名+label
        label+label
    
    6.子代选择器(IE6及其以下版本不支持,IE7已提供支持):
      格式: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,~表示了属性检查单个属性值全部,并支持比较连字符之前比较
        由于这个功能很少用,不深入介绍了,需要的理解和深入可以搜索.
        重点:组选择器,组合选择器,后代选择器;
        次重点:自身选择器,后代选择器,临近选择器,子代选择器.