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,~表示了属性检查单个属性值全部,并支持比较连字符之前比较
    由于这个功能很少用,不深入介绍了,需要的理解和深入可以搜索.
    重点:组选择器,组合选择器,后代选择器;
    次重点:自身选择器,后代选择器,临近选择器,子代选择器