css选择器概述

1.标签选择器（ 直接将HTML标签作为选择器）

    例：  p{

                font-size:14px;

                color:blue;

                }

    声明页面中所有的<p>标签都采用样式。

2.id选择器（可以为标有特定id 的HTML元素指定特定的样式，用‘#’定义）

    例：  #blue{ color:blue;}

              <p id="blue">显示蓝色</p>

    只有id对应时才会采用对应的样式，但是id选择器在每个HTML文档中只能出现一次。

3.类选择器（类名的第一个字符不能是数字，用‘.’定义）

     例：  .center{ text-align:center;}

                <h3 class="center">文本居中</h3>

                <p class="center">文本居中</p>

    类名为center的元素即可采用样式，与id不同的是，类选择器可以多次使用。

4.派生选择器

    例：  li strong{ font-style:italic; font-weight:normal;}

              <p><strong>不采用样式</strong></p>

              <ol><li><strong>采用样式</strong></li>

                      <li>默认</li>

              </ol>

    只有在‘li’下的‘strong’才会采用样式

              #layer p{color:blue;margin-top:8px;}

    只有在id是‘layer’的元素中的‘p’才会采用样式（可多次使用）

              .center p{ color:blue;text-align:center;}   

    类名为'center'的元素中的‘p’才会采用样式

              p.center {color:blue;text-align:center;}

    类名为‘center’的‘p’才会采用样式

5.群组选择器（给多个不同的元素设置统一的样式）

    例：  p, td,td a{color:blue;font-size:16px;}

6.通用选择器

    例：  div * {border:1px solid #FFF;}

              定义div标签中所有元素的样式

7.相邻选择器

  例：  h3 + p{color:blue;}

    选择紧接着‘h3’元素后面的‘p’采用样式,注：'p'在'h3'后面，相邻，且二者要拥有同一个父元素。

8.属性选择器

  例：  [title]{color:blue;}

            <h3 title="some">蓝色字体</h3>

    拥有‘title’属性的元素能采用样式

            [title=good]{color:blue;}    

            <h3 title="good">蓝色字体</h3>

            <h3 title="some">默认字体</h3>

    拥有‘title’属性，且其值为‘good’的元素才能采用样式

            [title~=good]{color:blue;}    

            <h3 title="good boy">蓝色字体</h3>

            <h3 title="boy good">蓝色字体</h3>

    ‘title’的值与‘good’相似或相同时才采用样式

            [title|=good]{color:blue;}    

            <h3 title="good-boy">蓝色字体</h3>

            <h3 title="good boy">默认字体</h3>

    ‘title’的值以‘good’开头且必须是整个单词时，才能采用样式