CSS选择器

CSS工作机制是这样的：首先选择html文档中的元素，然后对所选元素进行属性定义，就能对其起作用了。
因此，首先需要掌握的就是如何通过CSS来选择页面上的元素。
CSS选择元素的方法可以分为这样几类，下面做一一介绍。

1.元素选择器

    html元素，即标签是最基本的选择器，可以直接使用这些标签来定义样式。例如：p {color:gray;}  h1 {color:blue;}
    

2.类选择器

    class选择器用于选择一组元素，将样式添加到这组元素的每个元素上。例如
        .red{color:red}
    可以作用于文档中每个class定义为red的元素：
        <p class="red">这是一个晴朗的早晨</p>，<h1 class="red">鸽哨声伴着起床号音</h1>
    同时，类选择器还可以限定作用域。例如，只是在段落p上定义一个类red:
        p.red{color:red}
    这样，这个类就只能对段落中class定义为red的元素起作用：
        <p class="red">这是一个晴朗的早晨</p>
        

3.ID选择器

    与class选择器不同，一个id的一个页面上只能出现一次。例如
        .mostImportant{color:red;}
    在页面上指定相应的元素:<p id="mostImportant">这是一个晴朗的早晨，鸽哨声伴着起床号音。</p>
    

4.属性选择器

    可以根据元素是否设置了某个属性，或者属性值来选择元素。例如：
    ->选择所有设置了alt属性的img元素:img[alt] {border: 5px solid red;}
    ->选择所有alt属性为"001.jpg"的img元素:img[alt="001.jpg"] {border: 5px solid red;}
    

5.后代选择器

    所谓后代选择器是指选取指定元素之下的所有匹配元素。
    例如，页面分为left和right两部分，现在要求left部分的所有链接样式默认为红色，而right部分为绿色。可以这样设置：
    #left a:link{color:red;}
    #right a:link{color:green;}
    注意，这里的后代是指所有后代节点，并不一定得是直接子节点。
    

6.子元素选择器

    与后代选择器不同，这里的子元素选择器是指直接子元素，而不是所有后代元素。
    例如，要选取right层直接子节点中所有类名为item的元素：
    #right>.item{color:red;}
    

7.相邻兄弟元素选择器

     这个选择符的作用是选择指定元素之后紧接的元素。例如
     #div1 + .div2{color:red;}为选择紧接在div1后面的指定类名为div2的元素。
    

8.首元素选择器

    选择第一个元素。例如：选择第一个类名设置为item的元素
        .item:first-child{color:red;}
    

9.链接伪类选择器

    a:link{}未访问的链接样式
    a:visited{}已经访问的链接样式
    a:hover{}鼠标悬停时的链接样式
    a:active{}选定的链接样式
    

10.伪元素选择器

    p:first-line{}选择第一行
    p:first-letter{}选择首字母
    
css的选择器大体上就是这么多。当然这只是一个很简单的轮廓描述，需要在实际编写代码的过程中加深认识，熟练综合高效运用选择器做样式布置。